跳过主要内容

Flip.from

Flip.from（状态：FlipState，参数：Object）：Timeline

立刻移动/调整目标以匹配提供的state对象，然后反向动画以移除这些偏移，最终达到当前状态。默认情况下，使用width和height属性进行调整，但你可以设置useScale: true改为使用缩放（变换）。它返回一个时间轴动画，因此你可以控制它或add()其他动画。statestatewidth和heightwidth/heightscale: trueuseScale: true

参数

  • 状态：FlipState

    从以下方式获取的状态：Flip.getState().

  • vars: 对象

    用于from动画的vars。你可以使用任何标准tween特殊属性，例如ease, duration, onComplete，等等。

返回值：时间线（Timeline）​

A 时间线animation

细节​

立刻移动/调整目标以匹配提供的state对象，然后反向动画以移除这些偏移，最终达到当前状态。默认情况下，使用width和height属性进行调整，但你可以设置useScale: true改为使用缩放（变换）。它返回一个时间轴动画，因此你可以控制它或add()其他动画。statestatewidth和heightwidth/heightscale: trueuseScale: true

详细讲解

用法​

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

  1. 获取当前状态​

    // returns a state object containing data about the elements' current position/size/rotation in the viewport
    const state = Flip.getState(".targets");

    这只是捕获有关当前状态的一些数据。可以使用选择器字符串、Element、元素数组或 NodeList。Flip.getState()不会修改任何内容（除非有活跃的 flip 动画影响其中任何一个目标，在这种情况下它会强制完成该动画以便准确捕捉最终状态）。默认情况下，Flip 只关注位置、尺寸、旋转和倾斜。如果你想让 Flip 动画影响其他 CSS 属性，你可以定义一个配置对象，并列出逗号分隔的props列表，例如：

    // record some extra properties (optional)
    const state = Flip.getState(".targets", { props: "backgroundColor,color" });

  2. 做出你的状态更改​

    执行 DOM 编辑、样式更新、添加/删除类，或任何必要的操作以达到最终状态。无需通过插件来做这件事（除非你正在批量处理）。例如，我们可以切换一个类：

    // make state changes. We'll toggle a class, for example:
    element.classList.toggle("full-screen");

  3. 调用Flip.from(state, options)​

    Flip 会查看state对象，比较记录的位置/尺寸和当前的位置/尺寸，立即重新定位/调整它们大小以看起来像是在上一状态中的样子，然后动画式地移除移除这些偏移。你可以指定几乎任何标准 tween 的特殊属性，例如duration, ease, onComplete，等等。Flip.from()返回一个时间轴，你可以向其添加add()内容或以任何方式控制它：

    // animate from the previous state to the current one:
    Flip.from(state, {
      duration: 1,
      ease: "power1.inOut",
      absolute: true,
      onComplete: myFunc,
    });

你可以同时翻转多个元素。stagger用来错开它们的开始时间。

特殊属性​

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

属性描述
absolute

Boolean | String | Array | NodeList | Element- 指定哪些目标应在 FLIP 动画过程中应用position: absolute在 FLIP 动画过程中应用。true, 所有所有目标都被影响，或者使用类似".box"（或一个包含元素的数组/NodeList，甚至单个元素）来指定目标的一个子集。例如，这可以解决使用弹性布局和网格布局时的布局问题。如果内容未能以无缝的方式表现，请尝试设置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状态。由于在初始状态中没有可供比较的位置/尺寸数据，它不会被包含在翻转动画中，但回调函数会接收到一个进入元素的数组作为参数，以便你可以按需为其添加动画效果（如淡入）。此回调返回的任何动画都将添加到翻转时间轴中，以确保在有冲突的翻转动画中断它时仍能强制完成。例如：

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"）、单个元素（Element）、元素数组（Array of Elements）或节点列表（NodeList）。如果提供的任何目标元素没有在stateincluded in the flip animation because there's no previous state from which to pull position/size data.onEnter和有包含在翻转动画中，因为没有之前的状态可以提取位置/尺寸数据。

切换类

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

zIndex

数字- 在整个翻转动画过程中立即将zIndex CSS属性设置为此值，然后在动画结束时恢复原状。例如，这使得你可以轻松确保动画期间你的翻转元素位于其他元素之上。

简单示例​

加载中...

弹性布局（Flex）示例​

加载中...

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

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

加载中...

目录

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗