Vue 和 Vuetify 动画内容跳转

Question

当 Vue 动画结束时，内容 "jumps" 备份，如您在此示例中所见：

<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 仍然占用相同的 space。解决这个问题的一种方法是为其他属性设置动画，例如 height。这样做的缺点是 div 需要有一个固定的高度，这在所有情况下都是不可能的。

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

使用 height 查看此 Codepen 示例动画：https://codepen.io/noeldemartin/pen/ommxZG

Vue and Vuetify Animation Content Jump