VUE学习笔记七:过渡动画Transition
过渡动画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学习笔记八:路由
文章
总共 0 条评论