如果我们将紫色 div 重新放置到一个新的旋转和缩放容器中（更改 DOM 结构），如何无缝地将其动画化？使用 "FLIP" 动画技术！按右箭头开始。

"First"： 获取初始状态。
const state = Flip.getState(targets)

"Last"： 将元素放置在最终状态。在这种情况下，我们会将元素放置在新的容器 <div> 中，这会导致位置、缩放和旋转完全不同。

"Invert"： 通过立即应用偏移量使元素看起来在之前的位置/大小。这样，它看起来像还没有移动。注意：我们在演示中动画此步骤，以说明通常会立即发生的情况。

"Play"： 动画移除这些偏移量。
Flip.from(state, options) 返回一个 GSAP 时间线，因此你可以添加其他动画，控制它等。

GSAP 的 Flip 插件 让这一切变得轻而易举！