注: transtion每次只能包含一个element。
<transition name="slide-fade">
<i class="iconfont icon-list" v-show="!showMenu" @click="showMenu=!showMenu"></i>
</transition>
<transition name="slide-fade">
<i class="iconfont icon-m-close" v-show="showMenu" @click="showMenu=!showMenu"></i>
</transition>
export default {
name: 'Index',
data () {
return {
showMenu:false,
}
}
}
.slide-fade-enter-active {transition: all .2s ease;}
.slide-fade-leave-active {transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.slide-fade-enter, .slide-fade-leave-to{transform: translateX(5px);opacity: 0;}