Vue 提供了 transition
的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡。
html中写入
<div id="demo">
<button v-on:click="show = !show"> //添加按钮,触发显示事件
Toggle
</button>
<transition name="fade"> //给动画的组件<p></p>放在这里
<p v-if="show">hello</p>
</transition>
</div>
show在定义事件中给处置 true or false
在css样式中写入。
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
介绍下css中内容
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter
被移除),在过渡/动画完成之后移除。v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave
被删除),在过渡/动画完成之后移除。
对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>
,则 v-
是这些类名的默认前缀。如果你使用了 <transition name="my-transition">
,那么 v-enter
会替换为 my-transition-enter
自己写动画有点麻烦,可以引入第三方库。
在index.html中引入第三方的库。样式可以选择animate.css
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
然后在HTML种写入
<transition
name="custom-classes-transition"
enter-active-class="animated tada" // tada可以改成其他的动画效果,animate中的名字就可以
leave-active-class="animated bounceOutRight" //bounceOutRight 同tada一样
>
<p v-if="show">hello</p>
</transition>
这样就简单的实现了动画效果。