跳过主要内容

Flip.getState

Flip.getState(targets:String | Element | Array, vars:Object):Object

捕获有关targets当前状态的信息,以便稍后进行Flip操作。默认情况下,这些信息包括维度、旋转、倾斜、透明度以及目标在视口中的位置。可以通过配置来捕获其他属性。targetstargetsvars参数。

参数

  • targets: 字符串 | 元素 | 数组

    你想要翻转(Flip)的目标元素。这可以是类似".my-class"的选择器文本,也可以是一个元素(Element),或者元素组成的数组,又或者是选择器文本组成的数组。

  • vars: 对象

    (可选)包含类似以下属性的配置对象:props, simple, kill,或者batch.

返回值:对象

可以传递给Flip.from(), Flip.to(), Flip.fit(),等等。

细节

捕获目标当前状态的信息,以便稍后进行翻转(Flip)。默认情况下,这些信息包括目标的尺寸、旋转角度、倾斜度、透明度以及它们在视口中的位置。如果存在任何正在进行的翻转动画影响到这些目标,则会强制它们完成,以便正确记录最终的内联样式。但除了完成正在进行中的翻转动画外,getState()不会修改任何内容;它纯粹用于读取/保存状态相关的信息。

// capture state
const state = Flip.getState(".details, .full-screen");

// now alter the state by toggling a class:
detailsElement.classList.toggle("active");

// now do a "Flip" animation from the previous state to the new one:
Flip.from(state, {
duration: 1,
ease: "power1.inOut",
absolute: true,
});

配置(Configuration)

这个Flip.getState()vars 对象(第二个参数)可以包含以下任意可选属性:

属性描述
发生在特定时间间隔内的回调(默认情况下大约为一次 requestAnimationFrame,所以几乎是立即的)。例如,假设您为您的批次定义了一个字符串 - 如果你想让这个状态合并进一个特定的发生在特定时间间隔内的回调(默认情况下大约为一次 requestAnimationFrame,所以几乎是立即的)。例如,假设您为您的批次定义了一个使得它的batch.state充当一个拥有该id下所有状态数据的中心对象,请使用批次(batch)的id,比如batch: "id",其中“id”是你分配给该批次的任意字符串。然后你可以像这样获取合并后的状态对象:Flip.batch("id").state。要清除该对象中的数据使其变为空并重新开始,请使用Flip.batch("id").clear(true)。请注意每当用匹配的id调用batch.getState()或者batch.run()上述特定的批次实例时,它会自动清空其batch.state对象。批量操作是一个高级功能,通常不是必需的。(添加于 3.9.0)
kill布尔值 - 默认情况下,任意正在进行的targets翻转动画都会被强制完成并终止,以确保正确记录最终状态并且内联样式不会污染新的状态(通常是在调用getState()后立即设置)。getState() is called from within a batch()内调用的情况下,终止会在所有动作完成后进行。getState())。你可以通过设置kill: false来覆盖此行为,这样你就可以手动在设置新状态前调用killFlipsOf()。通常很少需要这么做——通常来说,默认设置是最理想的。(添加于 3.9.0)
props字符串 - 额外需要记录的CSS属性列表,用逗号分隔,超出标准的位置和大小属性之外。例如,驼峰式CSS 属性名称,除标准定位/尺寸属性外也应记录。"backgroundColor,color"下列信息将始终被记录:记录:变换(如x、y、scaleX、scaleY、rotation、skewX)、宽度、高度和透明度。
simple布尔值 - 如果为 truetrue,Flip 将跳过确定位置时为了支持旋转/缩放/倾斜所需的额外计算。这就像是告诉 Flip“我保证翻转元素的容器没有旋转/缩放/倾斜”这样会使处理更快faster。大多数情况下性能差异并不明显,但如果你正在翻转大量元素,这有助于保持流畅性。

示例

// capture state
const state = Flip.getState(".details, .full-screen", {
props: "backgroundColor,color",
simple: true,
});
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗