Flip

gsap.registerPlugin(Flip) 

// grab state
const state = Flip.getState(squares);
  
// Make DOM or styling changes
switchItUp();
  
// Animate from the initial state to the end state
Flip.from(state, {duration: 2, ease: "power1.inOut"});

Flip 插件让你可以无缝过渡两个状态，即使 DOM 结构发生了巨大变化，通常会导致元素跳跃，Flip 也能处理。

Flip 会记录你元素的当前位置、尺寸和旋转，你可以进行任意更改，然后 Flip 应用偏移量让它们看起来好像从未移动过……最后 Flip 会动画式地移除这些偏移！用户界面过渡变得非常简单。所有繁重的工作都由 Flip 处理。移除这些偏移！UI 转场变得异常易于编写。Flip 处理了所有繁重的工作。

人们的评价：

更深入地使用了 GSAP 的 Flip 插件，我震惊于它能如此显著加快开发速度！这才是真正的强力工具！💪"- Manoela Ilic, Codrops

“它是怎么知道该做什么的？ 🤯"- @georgedoescode

“我真正被 GSAP 和 FLIP 的强大所折服。”- @Alex.Marti

“本周让我惊艳的就是 Flip 插件了。简直是天才之作。太聪明了！”- @PeHaa

视频​

当然，就像所有的 GreenSock 工具一样，它拥有丰富的 API，用于精确控制效果并实现你想要的外观。

"FLIP“ 是一种动画技术，代表 "First"（第一阶段），"Last"（最后阶段），"Invert"（反转），"Play"（播放） ，这个名称是由Paul Lewis提出的。下面是一个演示来展示其工作原理：

特性​

Flip 是如何工作的？​

“FLIP” 动画通常包括以下三个步骤：

简单示例​

弹性布局（Flex）示例​

高级示例​

配置对象​

这个Flip.from()参数对象（第二个参数）可以包含以下任选属性另外也可以包含任何标准 tween 属性，例如duration, ease, onComplete等。详细说明见此处:

属性

描述

• absolute

  Boolean | String | Array | NodeList | Element- 指定哪些目标应在 FLIP 动画过程中应用position: absolute。如果true, 所有所有目标都被影响，或者使用类似".box"的选择器文本（或元素数组/NodeList，甚至单个元素）来指定目标的一个子集。例如，这可以解决 flex 和 grid 布局中的布局挑战。如果表现不符预期，尝试设置absolute: true。请注意，position: absolute它会使元素脱离文档流，导致下方内容塌陷。在这种情况下，只需指定一个不包含容器元素的子集，让它保持布局空间。（添加于 3.9.0）

• absoluteOnLeave

  Boolean- 如果设置为true，任何“离开”的元素（传递给onLeave()的那些）将在翻转动画期间被设置为position: absolute。当你将元素设置为display: none来在最终状态中隐藏它们，但你希望它们可以淡出、缩放等时，这会非常有用。关键是这些元素不能影响布局，但在动画期间仍然可见。（添加于 3.9.0）

• fade

  Boolean- 默认情况下，如果与某个特定data-flip-id在前一个状态相关联的目标元素是不同的元素而不是在最终状态中具有相同data-flip-id的那个元素，则它将立即被交换；但如果你更希望它们交叉淡入淡出，请设置fade: true。同样，这只适用于元素交换的情况。如果“交换出去”（离开）的元素是display: none（CSS），显然它不会对淡出可见，但如果你将 Flip 设置为absolute: true，它会强制该元素恢复到之前的显示状态在翻转过程中以便它可以交叉淡出。在这种情况下需要absolute: true的原因是，否则该元素会影响文档流并打乱其他元素的位置，但如果它是position: absolute（CSS），则它会从文档流中移除，不会干扰定位。

• 嵌套

  Boolean- 如果 Flip 有嵌套的目标（比如父元素和子元素都在targets中），请设置nested: true以让 Flip 执行额外计算来防止这些移动叠加。父级的移动会影响其子元素，因此如果两者都被映射到最终位置距离初始位置 200px，并且 Flip 让它们都移动了 200px，则子元素最终会移动 400px，除非设置了nested: true。

• onEnter

  函数- 如果某个目标在原始state中找不到，或者它在原始状态中不在文档流中（比如display: none），但它确实存在于最终状态的IS文档流中，会调用此回调函数。由于在原始状态中没有可比较的位置/尺寸数据，它不会包含在翻转动画中，但回调函数接收一个进入元素的数组作为参数，这样你可以根据需要对它们进行动画处理（例如淡入）。此回调返回的任何动画都会添加到翻转时间轴中，以便在竞争的翻转中断时强制完成。例如：end state. Since there is no position/size data to compare to in the original state, it won't be included in the flip animation, but the callback receives an Array of the entering elements as a parameter so that you can animate them as you please (like fade them in). Any animation returned by this callback will get added to the flip timeline so that it gets forced to completion if a competing flip interrupts it. For example:

  onEnter: elements => gsap.fromTo(elements, {opacity: 0}, {opacity: 1})
  

• onLeave

  函数- 如果某个目标存在于原始state状态中但不存在于结束状态中，或者在结束状态中不在文档流中（比如display: none），则会调用此回调函数。由于在结束状态中没有可比较的位置/尺寸数据，它不会包含在翻转动画中，但回调函数接收一个离开元素的数组作为参数，这样你可以根据需要对它们进行动画处理（例如淡出）。重要提示：这些元素不可见，除非你也设置了absolute: true（否则会破坏文档流）。如果设置了absolute: true，它会强制display恢复到之前的状态，然后在翻转结束时再恢复回来。此回调返回的任何动画都会添加到翻转时间轴中，以便在竞争的翻转中断时强制完成。例如：

  onLeave: elements => gsap.fromTo(elements, {opacity: 1}, {opacity: 0})
  

• props

  字符串- 一个逗号分隔的驼峰式CSS 属性列表，除了标准的定位/尺寸/旋转/倾斜属性之外，还应包括这些属性在翻转动画中。例如，"backgroundColor,color"。然而，这只有在state对象（第一个参数）中存在这些属性的情况下才有效，否则就没有对应的数据可供提取。默认情况下，Flip 将使用props在调用Flip.getState(targets, props)时捕获的状态数据，因此很少需要在props，只在你想将其限制为状态中捕获的部分属性时才有用。Flip.from()中定义LIMIT them to a subset of the ones captured in the state.

• prune

  Boolean- 如果设置为true，Flip 将从动画中移除与前一个状态（位置/尺寸）匹配的任何目标，以节省资源。这需要一些前期更多的处理，但在动画期间当移除多个目标时可能提高性能，此外也可以使交错动画更加直观，因为你可能不希望非动画目标影响交错计算。（添加于 3.9.0）

• scale

  Boolean- 默认情况下，Flip 会通过修改width和heightCSS 属性来改变元素大小，但如果你想改为缩放元素（通常性能更好），请设置scale: true.

• simple

  Boolean- 如果设置为true，Flip 将跳过确定位置时为了支持旋转/缩放/倾斜所需的额外计算。这就像是告诉 Flip“我保证翻转元素的容器没有旋转/缩放/倾斜”这样会使处理更快faster。大多数情况下性能差异并不明显，但如果你正在翻转大量元素，这有助于保持流畅性。

• spin

  Boolean | Number | Function -

  如果true，元素将在翻转动画期间额外旋转 360 度，从而看起来更有趣。你也可以定义数值完整旋转圈数，包括负数，因此-1会朝相反方向旋转一圈。如果你提供一个函数，它将为每个目标调用一次，以便你可以为每个单独元素返回任意旋转值。这样你就可以让某些目标朝一个方向旋转，其他元素朝另一个方向旋转，或者返回 0 表示完全不旋转。示例代码：...

  Flip.from(state, {
    spin: (index, target) => {
      if (target.classList.contains("clockwise")) {
        return 1;
      } else if (target.classList.contains("counter-clockwise")) {
        return -1;
      } else {
        return 0;
      }
    },
  })
  

• targets

  String | Element | Array | NodeList- 默认情况下，Flip 将使用来自state对象（第一个参数）的目标，但你可以指定其中的一个子集作为选择器文本（".class, #id")、一个元素、一组元素或一个NodeList。如果提供的任何目标在对象中未找到，则它将被传递给stateincluded in the flip animation because there's no previous state from which to pull position/size data.onEnter和有在翻转动画期间添加一个CSS类到目标上。例如

• 切换类

  字符串- 在整个翻转动画过程中立即将zIndex CSS属性设置为此值，然后在结束时恢复。这使得确保您的翻转元素在动画期间位于其他元素之上变得简单，例如。"flipping".

• zIndex

  数字- 立即将zIndex CSS属性设置为此值，并在整个翻转动画期间保持该值，最后再恢复。这样就能轻松确保翻转元素在动画期间位于其他元素之上，比如。

如何在两个不同的元素之间进行翻转动画？​

Flip会在每个与之交互的元素上查找一个data-flip-id（通过Flip.getState()data-flip-id属性，如果找不到，Flip会自动分配一个递增的ID（例如"auto-1"、"auto-2"等）。它允许你关联目标（"from"状态中具有特定data-flip-id的目标会与end状态中具有相同data-flip-id的目标匹配）。这个data-flip-id可以是任意字符串，不仅仅是数字。Flip.getState()或者Flip.from()等等）并且如果没有找到，Flip会自动分配一个递增的ID（比如“auto-1”，“auto-2”等）。它让你可以关联目标（在“from”状态中有data-flip-id的目标会被与end状态中有相同data-flip-id的目标匹配）。data-flip-id可以是任意字符串，不只是数字。data-flip-idid 为"5"data-flip-iddata-flip-idid 为"5"设置为true时，请记住坐标将基于当前视口进行计算，因此如果在翻转过程中视口大小发生变化或用户滚动页面，可能会影响定位（但在翻转完成后且偏移量被移除之后，元素将会回到正确的位置）。换句话说，进行中的翻转并不总是响应式的。data-flip-iddata-flip-id

因此如果你想要在两个不同的目标之间翻转，请确保end状态中的data-flip-id属性与"from"状态中的一致。当Flip看到from/end状态中有两个相同值的data-flip-id时，它会自动判断哪一个正在消失（通常带有display: none），并以此为基础进行“交换”元素操作。如果你希望它们交叉淡入淡出，只需设置crossfade: true，否则它们会立即交换。通常最好设置absolute: true，以便Flip修改position值时不会影响文档流。display: nonedisplay: nonefade: truecrossfade: trueabsolute: trueabsolute: truedisplayposition

批处理​

如果你需要创建多个协调一致的Flip动画（可能在不同的React组件中）怎么办？它们都需要先调用getState()，然后再进行DOM/样式更改，因为那样做可能会改变其他元素的位置和大小。请参阅Flip.batch()的文档。多个协调一致的Flip动画（可能在不同的React组件中）？.getState() 在他们中的任何一个都对DOM/样式进行了更改，因为这样做可能会改变其他元素的位置/大小。请参阅Flip.batch()的文档。Flip.batch()了解详情。

注意事项与技巧​

// BAD
Flip.from(state, {
  duration: 1,
});

// GOOD
Flip.from(state, {
  targets: ".your-class", // <-- BINGO!
  duration: 1,
});

方法​

示例演示​

查看完整系列的使用演示和我们最喜欢的社区灵感演示在 CodePen 上。