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

我似乎无法清除由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);"

最佳答案

如果您要清除属性，则可以使用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或其他方式提供简化的测试用例。

补间快乐!