javascript - 将 css3 变换添加到当前 css3 变换值

Question

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

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

我如何通过 javascript 以以下形式获取该值

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

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

: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

我不确定您的问题的上下文是什么，但听起来您需要使用jQuery Transit等 css3 转换库，因为您大量使用 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);

});

JSFiddle 演示