首页 > 开发 > JS > 正文

vue 2.0 transiton过渡效果异常

2017-09-05 12:25:26  来源:网友分享

vue2.0上做切换过渡时,发现切换显示正常,切换消失时有延时没有过渡效果

<transition name='fade'>        <div v-show="isShow" class="detail" >                    </div>        </transition>
.detail            position fixed            z-index 100            top 0            left 0            width 100%            height 100%            overflow auto            background rgba(7,17,27,.8)            &.fade-enter-active,&.fade-leave-active                transition opacity 3s            &.fade-enter,&fade-leave-active                opacity 0

解决方案

能用animate.css 就用, 不要自己去造轮子。 直接 <transition enter-active-class="animated fadeIn" leave-active-clss="animated fadeOut"></transition>