Vue动画离开动画不生效

官方Demo地址

起因

在写vue动画的时候参考官方给的demo发现只有进入动画没有离开动画。下面是官方代码。

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  button>
  <transition name="fade">
    <p v-if="show">hellop>
  transition>
div>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

无论怎么改动发现都不生效,于是先不研究,然后复制了第二demo,即css过渡,发现这个代码的进入动画和离开动画都生效了,百思不得其解,然后就在这个基础上改动,复制了第一个demo的代码,并且生效了(如下)

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
 transition: opacity .5s;
}
.slide-fade-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.slide-fade-leave-to{
 opacity: 0;
}

仔细对比了两个css的区别发现只有在transition上name的名字有差异,于是想是不是第一个demo不能直接fade命名,于是在前面增加了test,发现确实可以了。代码如下。

 .test-fade-leave-active{
        transition: opacity 5s;
    }
    .test-fade-leave-to {
        opacity: 0;
    }

不清楚原因,望有人看到可以帮忙解释一下。

你可能感兴趣的:(vue动画,vue离开过渡,vue离开效果不生效)