Vue和Vuetify动画内容跳跃

Question

当Vue动画结束时，内容会“跳跃”回来，如本例所示：

https://codepen.io/propsoft/pen/PRYjBZ

<transition name="slide-y-transition">
  <div v-show="compare">
    Here is the hidden {{ content }}
  </div>
</transition name="slide-y-transition">

有关如何解决此问题的任何想法？

干杯！

Answer 1

动画的问题在于它使用transform: translateY(-15px);，这只会导致内容的视觉翻译，但div仍占据相同的空间。解决该问题的一种方法是设置其他属性的动画，例如height。这样做的缺点是div需要具有固定的高度，这并非在所有情况下都可行。

您可以在不设置动画效果的情况下测试不同的方法，看看是什么导致下面的div实际移位或不移位。然后就可以制作动画。

使用您的使用height：https://codepen.io/noeldemartin/pen/ommxZG

进行动画处理的示例来检查此codepen