Vue.js 离开动画没有按预期工作

Posted 2023-02-22

【中文标题】Vue.js 离开动画没有按预期工作

【英文标题】：Vue.js leave animation not working as expected

【发布时间】：2021-01-02 00:31:27

【问题描述】：

demo 非常简单，类似于 Vue.js 文档中的示例。

new Vue(
  el: '#demo',
  data: 
    show: true
  
)

p 
  width: 100px;
  border: 1px solid red;


.fade-enter-active,
.fade-leave-active 
  transition: all 5s;


.fade-enter 
  opacity: 0;
  width: 500px;
  background: red;


.fade-enter-to 
  background: black


.fade-leave 
  opacity: 0;
  background: red


.fade-leave-to 
  background: black;
  width: 1000px;
  opacity: 1

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

问题是，当离开动画开始时，它似乎从 DOM 中移除（v-if 是 false）如此之快以至于根本没有任何动画！

但是，如果我删除opacity，动画就会生效！ opacity 为何重要？

.fade-leave 
  /* opacity: 0; */
  background: red;
 

.fade-leave-to 
  background: black;
  width: 1000px;
  /* opacity:1; */

---

还有一个问题，我认为离开动画应该是DOM背景先变成红色（结果是没有或者我无法判断），然后慢慢变成黑色。那么，是不是我的错觉？

【问题讨论】：

你应该创建一个函数而不是 show = !show。该函数应该启动动画并为 show = !show

设置超时

【参考方案1】：

不透明度很重要，因为动画会根据它淡化。

这里我已经将不透明度0直接添加到按钮Hello的类fade-enter-active中。可以看到动画一步步的褪色。

相反，不透明度为 1 时，您的渐变没有方向。它保持在 1。

【讨论】：

我的问题是关于离开动画