过渡动画Transition方法,重点是4种过渡类的样式。

<button v-on:click="show=!show">toggle</button>
<div class="ab">
<transition name="fade" mode="out-in">
           <!--<p v-show="show">i am show</p>-->
           <!--<div :is="compos"></div>-->
           <p v-if="show" key="1">i am show</p>
           <p v-else key="2">not in show</p>
</transition>
</div>

<style>
html{
height: 100%;
}
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: all 1s ease;
}
.fade-leave{
transition: all 1s ease;
}
.fade-leave-active{
opacity: 0;
}
</style>    

上一篇:VUE学习笔记六:组件通信

下一篇:VUE学习笔记八:路由