网络动画 API。 FLIP 在动画期间弄乱了边界

Question

在动画过程中会出现一些奇怪的边框效果。第一页工作得很好，但另一页是我在这里写的原因。 that's a 46-second youtube video of an issue 有谁知道发生这种情况的可能原因？

我正在使用本指南来完成此操作https://css-tricks.com/animating-layouts-with-the-flip-technique/

Answer 1

它会拉伸，因为您正在缩放元素，这也缩放了边框。您可以通过获取宽度/高度的增量并将其应用于边框宽度来反转边框上的缩放比例。该边框宽度应该以与整个元素动画相同的持续时间和缓动进行动画。

例如，如果您的元素缩放 2 倍并且边框宽度为 1，则您需要将边框宽度从 1 / 2 (0.5) 设置为 1 以反转扭曲效果。