一、使用过渡类名实现动画
1.1 HTML结构
<div id="app">
<input type="button" value="toggle" @click="flag=!flag"/>
<!--使用transition把要做动画的元素包裹起来-->
<transition>
<h3 v-if="flag" v-color="'red'">{{msg}}</h3>
</transition>
</div>
1.2 VM实例
var vm=new Vue({
el:'#app',
data:{
msg:'我是一个屁',
flag:false
},
directives:{
color:{
bind(el,binding){
el.style.color=binding.value
}
}
}
});
1.3 定义两组类样式
<style type="text/css">
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(100px) translateY(100px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
</style>
二、自定义过渡类名实现动画
如果你使用了 ,那么 v-enter 会替换为 my-transition-enter
如:
<transition name="my">
<h6 v-if="flag2">我是一个h6</h3>
</transition>
此时HTML样式为:
<style type="text/css">
.my-enter,
.my-leave-to{
opacity: 0;
transform: translateX(100px) translateY(100px);
}
.my-enter-active,
.my-leave-active{
transition: all 1s ease;
}
</style>
三、使用第三方库animate.css实现动画
<!--使用transition把要做动画的元素包裹起来,注意使用外部animate库的时候,要加上animated这个类-->
<!--<transition enter-active-class="wobble" leave-active-class="zoomOut" >
<h3 v-if="flag" class="animated">{{msg}}</h3>
</transition>-->
<!--使用 :duration 来统一设置入场时间和离场时间-->
<!--<transition enter-active-class="wobble" leave-active-class="zoomOut" :duration='200'>
<h3 v-if="flag" class="animated">{{msg}}</h3>
</transition>-->
<!--也可以使用:duration="{enter:毫秒数,leave:毫秒数}" 来分别设置入场离场时间-->
<transition enter-active-class="wobble" leave-active-class="zoomOut" :duration="{enter:200,leave:800}">
<h3 v-if="flag" class="animated">{{msg}}</h3>
</transition>
四、列表动画 transition-group
<ul>
<!--在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,
不能使用transition包裹,需要使用transition-group包裹-->
<!--如果要为 v-for 循环创建的元素设置动画,必须为每一个元素设置 :key 属性-->
<transition-group>
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}-----{{item.name}}</li>
</transition-group>
</ul>
在样式中:
/*下面的 .v-move 和 v-leave-active 配合使用,能够实现类别后续的元素逐渐飘上来,
而不会显得卡顿 的效果*/
.v-move{
transition: all 1s ease;
}
.v-leave-active{
position: absolute;
}
关于transition-group 属性的问题:
- appear属性:实现页面刚展示出来时候的效果,是飘上来的,而不是直接出来
- tag属性:设置tag属性,指定transition-group 渲染为指定元素,如果不指定,默认为span标签
如:
4.1、没有设置tag属性:默认渲染为span标签
<ul>
<!--在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用transition包裹,
需要使用transition-group包裹-->
<!--如果要为 v-for 循环创建的元素设置动画,必须为每一个元素设置 :key 属性-->
<transition-group appear>
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}-----{{item.name}}</li>
</transition-group>
</ul>
效果为:
4.2、设置了tag 属性为 ul标签后: