Web动画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动画，以反转变形的效果。