API веб-анимации. FLIP портит границы во время анимации

Question

Во время анимации возникают некоторые странные эффекты границы. Первая страница работает нормально, но я пишу здесь именно по другой. это 46-секундное видео на YouTube о проблеме Кто-нибудь знает возможные причины, почему это происходит?

Я использовал это руководство, чтобы выполнить sh это https://css-tricks.com/animating-layouts-with-the-flip-technique/

Answer 1

Он растягивается, потому что вы масштабируете элемент, который также масштабирует границу. Вы можете инвертировать масштабирование границы, получив дельту по ширине / высоте и применив ее к ширине границы. Эта ширина границы должна анимироваться с той же продолжительностью и плавностью, что и общая анимация элемента.

Например, если ваш элемент масштабируется с коэффициентом 2, а ширина границы равна 1, вам нужно будет анимировать border-width от 1/2 (0,5) до 1, чтобы инвертировать эффекты деформации.