jquery - 清除由 GSAP 动画设置的内联样式

Question

我似乎无法清除由 GSAP 动画设置的图像元素上的样式。

我试过各种方法:

$('#element').removeAttr("style");

$('#element').attr('style', '');

$("#element").css({
    '-webkit-transform': "",
    '-moz-transform': "",
    '-o-transform': "",
    'msTransform': "",
    'transform': ""
});

以上均无效。虽然，当我从 Chrome 控制台运行这些方法时，它们确实有效......

应用的样式如下:

style="-webkit-transform: matrix(-0.99775, 0.06697, -0.06697, -0.99775, 0, 0);"

Answer 1

如果你想清除属性，你可以使用 GSAP 的 clearProps 特殊属性，比如:

//clear all inline properties immediately with a set() call:
TweenLite.set("#element", {clearProps:"all"});

//or clear just the transform:
TweenLite.set("#element", {clearProps:"transform"}); 

//or clear the transform at the end of your tween:
TweenLite.to("#element", 1, {rotation:60, scale:0.5, clearProps:"transform"});

郑重声明，GSAP 仅在您要求时设置属性(例如在补间期间)——它不会不断地强制它们进入内联样式。变换有点奇怪，因为为了解决某些浏览器错误并正确维护状态，它必须记录元素本身的变换组件(旋转、缩放、位置、倾斜)，然后在下次补间时读取这些组件该元素，除非您设置 parseTransform:true 强制它从浏览器读取计算出的样式矩阵，但这几乎从来没有必要。当然，如果您清除 Props:"all"或任何转换，它也会将它们删除，并在下次从浏览器提供的矩阵中重新解析它们。

如果您仍然遇到问题，那么在您的 GSAP 代码上下文中查看问题也确实有帮助，因此请在 codepen 或 jsfiddle 或其他软件中提供简化的测试用例。

补间快乐!