revert

返回：自身（Self）​

时间轴本身，便于链式调用

细节​

撤销时间轴并将其销毁，将目标恢复到动画前的状态，包括移除时间轴添加的内联样式。

问题所在​

如果你想将一个元素恢复到它被动画处理前的状态怎么办呢？在你可以直接使用animation.progress(0)，对吧？不完全是这样。考虑以下这个元素：

<div class="box"></div>

完全没有内联样式其 opacity 是 1（默认值），然后你执行了如下代码：

// fade out
let tl = gsap.timeline();
tl.to(".box", { opacity: 0 });

现在我们试着将其恢复回原始状态：

tl.progress(0).pause();

这确实会将其设置为 GSAP 解析自计算样式的初始值：

<!-- inline style is still present -->
<div class="box" style="opacity: 1"></div>

但这意味着它 仍然带有内联样式。一般来说这不会有什么影响，但假设有一个媒体查询的 CSS 规则对该元素设置了 opacity 为 0.5。糟糕！内联样式会覆盖类选择器定义的规则。因此我们需要一种方法，让 tween 或 timeline 记录下最初的内联样式，并且移除它添加过的那些样式。这就需要一个新的方法，因为progress(0) 应该设置内联样式以确保动画当前时刻的状态是正确的。

解决方案：revert()​

GSAP 3.11 在所有 Tween 和 Timeline 上新增了一个.revert()方法，使用起来非常简单：

tl.revert(); // removes inline styles that were added by the animation