Question

我有这个元素，在执行某个javascript函数后，会将其css转换为：

-webkit-transform : translateX(25px) translateY(25px) scale(1);

我如何通过javascript以

的形式获得该值

"translateX(25px) translateY(25px) scale(1)"？

我真正希望实现的是我想在mouseenter上添加“rotate(360deg)”。我想如果我抓住它当前的变换值，我将能够实现这一点。

：hover伪类不会起作用，因为它会被-webkit-transform的当前值覆盖

编辑：

我忘了提到这实际上是针对我正在做的插件。翻译值通过html数据属性设置，并通过jQuery的.data()提取。

Answer 1

如果修复的值不是由脚本计算的，我认为更好的选择是保持css形式的javascript，所以不要在脚本中硬编码动画值，而只需创建几个css规则，例如

.transformed {
  -webkit-transform: translateX(25px) translateY(25px) scale(1);
}
.transformed:hover {
  -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}

执行第一个脚本后，只需将.transformed类添加到元素中即可然后你可以让假类:hover为你工作，而不需要使用javascript来完成这项任务。

否则，如果您还需要在360deg上保留mouseleave轮换，只需将最后一条规则更改为

.transformed.mouseenter {
  -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}

并在mouseenter事件上添加.mouseenter类。

Answer 2

我不确定你问题的上下文是什么，但听起来你需要使用css3过渡库，例如jQuery Transit，因为你使用的是Javascript。例子：

$(".box").on("mouseenter", function () {

    $(".box").transition({x: '+=25', y: '+=25', scale: 1.5, rotate: 360 }, 500);

});

$(".box").on("mouseleave", function () {

    $(".box").transition({x: '-=25', y: '-=25', scale: 1, rotate: 0 }, 500);

});


var scaleFactor = 0.25;

$(".boxGrow").on("click", function () {

    $(".boxGrow").transition({scale: '+=' + scaleFactor }, 500);

});

添加css3转换为当前css3转换值

2 个答案:

JSFiddle Demo