vue中用css加动画的思路

用transition包裹要加动画的组件,给transition加一个name属性,类似fadetog,用tadetog加每个过渡的六个状态

<transition name='fadetog'><cpt1 v-show='onOff'></cpt1></transition>

.fadetog-enter{
opacity:0
}
.fadetog-enter-active{
transition:0.5s;
}
.fadetog-enter-to{
opacity:1
}
.fadetog-leave{
opacity:1
}
.fadetog-leave-active{
transition:0.5s;
}
.fadetog-leave-to{
opacity:0
}

猜你喜欢

转载自blog.csdn.net/aliven1/article/details/80425663