Flip.fit
Flip.fit（targetToResize:String | Element, destinationTargetOrState:String | Element | FlipState, vars:Object）；
重新定位/调整一个元素的大小，使其看起来完全适配到另一个元素的区域中。使用resizeChildren特殊属性，你甚至可以让它的某个子元素用于适配计算！默认情况下，它会更改变换（x、y、rotation和skewX）以及元素的宽度和高度，但如果你设置{useScale: true}，它将改用scaleX和scaleY代替宽度和高度。fitChildresizeChildren子元素元素用于适配计算！默认情况下，它会修改变换（x、y、rotation和skewX）以及元素的width和height，但如果设置useScale: true，它将使用scaleX和scaleY代替width和height。scale: true it will use scaleX and scaleY instead of width and height.
参数
要调整大小的元素: 字符串 | 元素
应该被调整尺寸或移动的 DOM 元素。可以是像
".my-class"这样的选择器文本，或者直接是对该 Element 的引用。目标目标或状态: 字符串 | 元素 | FlipState
需要适配进去的 DOM 元素或 FlipState。
vars: 对象
使用的变量参数。其中可以包含标准的动画属性如
ease,duration,onComplete等，也可以包含特殊的设置如absolute,fitChild,scale，等等。
细节
重新定位和调整一个元素的大小，使其看起来完全适应另一个元素所在区域。使用fitChild特殊属性，你甚至可以使元素的一个子元素子元素来进行适配计算！默认情况下，它会修改元素的变换（x、y、旋转和 skewX）以及宽度和高度，但如果你设置了scale: true it will use scaleX and scaleY instead of width and height.
除非你设置duration在vars对象中，否则适配将立即发生，在这种情况下它将返回一个gsap.to()动画。事实上，你几乎可以在那里定义任何标准的 GSAP 动画属性，例如onComplete, delay, ease等。例如：
// fit ".box1" into the same area in the viewport as ".box2" immediately:
Flip.fit('.box1', '.box2');
// or animate there instead:
Flip.fit('.box1', '.box2', {
duration: 1,
ease: 'power1.inOut',
onComplete: () => console.log('done!')
});
你甚至可以使用之前从Flip.getState()记录的状态对象作为目标，使当前元素适配到那个时刻相同的位置和大小！
// capture state
const state = Flip.getState(box1Element);
// change state, like we'll put it into a different container:
newParent.appendChild(box1Element);
// now fit it into where it was previously:
Flip.fit(box1Element, state);
多酷啊？
这个vars参数对象（第三个参数）可选地定义以下任意配置属性另外也可以包含任何标准 tween 属性，例如duration, ease, onComplete，等等。其描述见于别处。别处:
| 属性 | 描述 |
|---|---|
| absolute | 布尔值 - 如果为 truetrue，目标的positionCSS 属性将被设为absolute。例如，这可以解决 flex 和 grid 布局中的布局难题。 |
| fitChild | 字符串 | 元素 - 如果你想让元素的某个子元素子元素进行适配，请定义该子元素，如fitChild: ".child-class"（或者直接引用子元素本身）。加载中... |
| getVars | 布尔值 - 如果为 truetrue，不会执行适配操作，而是只返回一个 vars 对象，其中包含正确适配所需的信息，以便将其传递给动画或其他用途。例如，如果你只是想知道 x、y、scaleX、scaleY、rotation 和 skewX 的值以完成正确的适配，你可以这样做：let vars = Flip.fit(".box1", ".box2", {scale: true, getVars: true}); |
| props | 字符串 - 逗号分隔的列表，列出除了控制位置、维度、旋转和倾斜的标准属性之外，还需要更改为匹配目标的 CSS 属性。例如，"backgroundColor,color" |
| scale | 布尔值 - 默认情况下，Flip.fit() 将影响width和heightCSS 属性来改变元素大小，但如果你想改为缩放元素（通常性能更好），请设置scale: true。唯一的例外情况是你定义了一个fitChild，在这种情况下它将下列信息将始终被记录：表现得好像scale: true已定义（即使你省略了它）。 |
| simple | 布尔值 - 如果为 truetrue，Flip 将跳过确定位置时为了支持旋转/缩放/倾斜所需的额外计算。这就像是告诉 Flip“我保证翻转元素的容器没有旋转/缩放/倾斜”这样会使处理更快faster。在大多数情况下，性能差异并不明显，但如果你正在适配大量的很多元素，开启此选项可以帮助保持流畅性。 |
