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仅在您要求时设置属性（例如在补间期间） - NOT 不断强制它们进入内联样式。转换是一个奇怪的野兽，因为为了解决某些浏览器错误并正确维护状态，它必须在元素本身上记录转换组件（旋转，缩放，位置，倾斜），然后在下次补间时读取它们除非你设置parseTransform：true，否则它会强制它从浏览器中读取计算出的样式矩阵，但这几乎不需要。当然，如果您使用clearProps：“all”或任何变换，它也会将它们擦除，并在下次从浏览器提供的矩阵中重新解析它们。

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

快乐的补间！

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

1 个答案: