用 vue 实现的动画,为什么却不按照预期来运行(已经添加了.fade-leave 类,但貌似不生效)

运行效果也可在这查看: https://jsbin.com/leyeyureki/edit?html,css,js,output
  对这段代码的预期是:
    (1)在未触发动画前,.box 的 opacity 的初始值是 0.3 ;
    (2)在点击切换按钮时(使 show 变为 false),离开过渡动画被触发,css 中 opacity 的
       值先变成 1,然后经过 3s 后,opacity 的值变成 0。

  问题在于:当点击切换按钮时,貌似.fade-leave 这个类并没有生效。
           我不是已经在 css 中添加了.fade-leave 这个类了吗?
           但为什么点击切换时,它并没有将 opacity 的值首先变成 1.
           .fade-leave 这个类不是在离开过渡被触发时会立刻生效吗?
  <div id="app">
    <input type="button" value="切换"  v-on:click="handleClick">
    
    <transition name="fade">
      <div class="box" v-if="show">hello world</div>
    </transition>
  </div>
.box {
  /* .box 的初始值 */
  opacity: 0.3;
}

/* 
  对这段代码的预期是:
    (1)在未触发动画前,.box 的 opacity 的初始值是 0.3 ;
    (2)在点击切换按钮时(使 show 变为 false),离开过渡动画被触发,css 中 opacity 的
       值先变成 1,然后经过 3s 后,opacity 的值变成 0。

  问题在于:当点击切换按钮时,貌似.fade-leave 这个类并没有生效。
           我不是已经在 css 中添加了.fade-leave 这个类了吗?
           但为什么点击切换时,它并没有将 opacity 的值首先变成 1.
           .fade-leave 这个类不是在离开过渡被触发时会立刻生效吗?

*/

.fade-leave {
  opacity: 1;
}

.fade-leave-active {
  transition: opacity 3s;
}

.fade-leave-to {
  opacity: 0;
}
var vm = new Vue({
  el: "#app",
  data: {
    show: true
  },
  methods: {
    handleClick: function() {
      this.show = !this.show;
    }
  }
})

回答:

并不是的,请看官方的那一句话: v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除,这只是一个时刻,一帧时间就是1/24秒(太快了),就是最后动画变为 opacity: 0 的下一个时刻,opacity: 1,基本上看不出效果的。其实毫无意义的,这也是官方在1.8版本后被删除的原因。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注