Skip to content

GSAP中文文档 - timeline 方法 - 撤销(revert)

撤销(revert)

revert 方法用于撤销时间轴的所有动画效果,并将其终止,将目标元素恢复到动画之前的状态,包括移除时间轴添加的所有内联样式。

方法签名

plaintext
revert(): Self

撤销时间轴的所有动画效果,并将其终止,将目标元素恢复到动画之前的状态。

返回值(Returns)

  • Self
    • 时间轴本身,便于链式调用。

详细信息(Details)

撤销时间轴的所有动画效果,并将其终止,将目标元素恢复到动画之前的状态,包括移除时间轴添加的所有内联样式。

问题

如果你想要将一个元素恢复到动画之前的状态,你会怎么做?你可能会想到使用 animation.progress(0),对吗?差不多。考虑这个元素:

没有内联样式。不透明度默认为1,然后你执行以下操作:

javascript
// 淡出
let tl = gsap.timeline()
tl.to('.box', { opacity: 0 })

现在让我们尝试恢复到原始状态:

这确实将其设置回了 GSAP 从计算样式解析出的起始值:

html
<!-- 内联样式仍然存在 -->
<div class="box" style="opacity: 1"></div>

但这意味着 仍然有内联样式。通常这并不重要,但也许一个媒体查询 CSS 规则将该元素的不透明度设置为0.5。哦!内联样式将覆盖类规则。因此,我们需要一种方法,让补间/时间轴跟踪原始内联样式并移除它添加的那些。这需要一个新的方法,因为 progress(0) 应该 设置内联样式以确保状态是动画在该点应有的状态。

解决方案:revert()

GSAP 3.11 为所有补间和时间轴添加了 .revert() 方法,所以操作非常简单:

javascript
tl.revert() // 移除动画添加的内联样式

赣ICP备2023003243号