Vue 过渡为何只能单向执行？原因与解决办法大揭秘

2024-03-01 22:33:42

Vue 过渡为何只能单向执行？

在使用 Vue 过渡时，你可能会遇到一个常见问题：过渡只能在一个方向上执行，例如显示元素时有动画，但隐藏元素时没有。本文将深入探讨这个问题，提供解决方案并分享一些相关知识。

Vue 过渡的原理

为了理解这个问题，我们需要了解 Vue 过渡是如何工作的。Vue 过渡通过监听元素的 v-show 或 v-if 指令的变化来工作。当指令的值变为 true 时，过渡的 enter 钩子就会被调用，而当指令的值变为 false 时，过渡的 leave 钩子就会被调用。

隐藏元素无动画的原因

在你的示例中，你使用 max-height 属性来控制元素的高度，这会导致隐藏元素时没有动画。这是因为当元素的高度为 0 时，它实际上已经从 DOM 中消失了，这意味着 leave 钩子不会被调用。

解决方案

为了解决这个问题，我们需要使用一个永远不会使元素从 DOM 中消失的属性来控制元素的可见性。一个选择是使用 opacity 属性，如下所示：

.slide-enter-active,
.slide-leave-active {
  transition: 2s;
}

.slide-enter-to {
  opacity: 1;
}

.slide-leave-to {
  opacity: 0;
}

通过使用 opacity，你可以使元素逐渐淡出，这将创建一个更流畅的隐藏动画。

示例代码

以下是使用 opacity 属性解决问题的示例代码：

<div id="app">
  <button v-on:click="show = !show">Toggle</button>
  <transition name="slide">
    <div v-show="show" style="opacity: 1">
      This is a box
    </div>
  </transition>
</div>

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.slide-enter-active,
.slide-leave-active {
  transition: 2s;
}

.slide-enter-to {
  opacity: 1;
}

.slide-leave-to {
  opacity: 0;
}