Vue 和 Vuetify 动画内容跳转

【问题标题】：Vue and Vuetify Animation Content JumpVue 和 Vuetify 动画内容跳转
【发布时间】：2018-04-10 05:41:16
【问题描述】：

当 Vue 动画结束时，内容会“跳”回来，如您在此示例中所见：

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

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

干杯！

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：