fade-enter效果正常显示，但fade-leave效果却无法显示，hello world直接消失而不是渐变消失

来源：5-1 Vue动画 - Vue中CSS动画原理

慕码人6617761

2018-04-16

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
      .fade-enter{
        opacity: 0
      }
      .fade-enter-active{
         transition: opacity 3s;
       }
      .fade-leave-to{
        opacity: 0;
      }
      .fade-leave-avtive{
        transition: opacity 3s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <transition name="fade">
        <!-- transition内为动画效果区 -->
        <div v-if="show">
          hello world
        </div>
      </transition>
      <button @click=handleClick>change</button>
    </div>
    <script>
    var vm = new Vue(
      {
        el: "#app",
        data: {
        show: false
      },
      methods: {
        handleClick() {
          this.show = !this.show
        }
      }}
    );
    </script>
  </body>
</html>

老师您好，我按照您视频中讲解写了如上代码。发现fade-enter的动画效果显示正常，但是fade-leave的效果却完全没有，hello world就直接消失而没有渐变。之前也遇到过很多次这个问题，想问下老师知道这是怎么回事嘛？

写回答

1回答