常见的自动布局陷阱

虽然布局 API 可以自动处理大多数动画场景，但某些边缘情况可能会产生意外结果。以下是需要注意的事项。

一些元素意外地消失了

在使用 children 选择器时，匹配子元素的后代元素（但不是目标元素本身）仅会在过渡进度的 50% 时更新其状态。为了避免两个状态之间的硬切换，这些元素在以下条件下会先淡出到不透明度 0，然后再回到 1：

The element is not explicitly targeted by the children selector
The element's size has changed
Its parent is a target and the parent's size has also changed

Workaround

要么将你希望保持可见的元素添加到 children 选择器数组中。
要么将 swapAt 参数更改为 opacity: 1。

const layout = createLayout('#root', {
  children: '.card', // Only .card elements are targets
  swapAt: { opacity: 1 } // This will make sure all descendants of .card are always visible during the transition.
});

在过渡过程中，根元素的位置会“跳动”

根元素的位置从不进行动画，因为这可能会引起其他问题，比如在过渡期间根兄弟元素跳动，因为它们不是布局的一部分。
根元素的尺寸可以进行动画，因为动画化宽度和高度会影响其他元素的位置（在大多数情况下）。

Workaround

如果你最终遇到需要对布局根元素的位置进行动画处理的情况，你将不得不使用当前根元素的父元素作为新的根元素：

// From this
const layout = createLayout('#container .grid'); // .grid position can't be animated.
// To this
const layout = createLayout('#container'); // Now .grid position can be animated

我的文本在布局过渡时跳动

同时对 fontSize 和 width 或 height 进行动画处理可能会导致文本在动画中间重新换行，尤其是在 Firefox 中。即使起始和结束状态的换行相同，中间帧的宽度/字体大小比例可能会触发换行。

Workaround

如果不需要文本换行，请在元素上使用 white-space: nowrap。

文本中内联的某些元素没有移动

为了防止在过渡过程中破坏文本流，文本节点相邻的元素被排除在位置动画之外。

<p>Some text <span class="highlight">inline element</span> more text</p>

Workaround

将文本元素封装在 span 标签中，以允许文本节点随着内联元素一起动画。

<p><span>Some text</span> <span class="highlight">inline element</span> <span>more text</span></p>

变换快捷方式不起作用

enterFrom、leaveTo 和 swapAt 参数不支持像 scale、rotate、x、y 等 CSS transform 简写。

// Won't work
createLayout('#root', {
  enterFrom: { scale: 0 }
});

Workaround

使用 transform 属性并配合完整的变换字符串：

// Use transform string
createLayout('#root', {
  enterFrom: { transform: 'scale(0)' }
});

SVG 元素未被动画化

SVG 元素及其子元素不包含在布局动画中。只有 HTML 元素会被跟踪和动画化。