Vue动画的应用先从基本开始:
首先我们是基本的显示隐藏切换
默认为false隐藏掉 通过按钮点击取反 实现显示隐藏功能,这边不再赘述
<div id="app">
<input type="button" value="切换" @click="flag=!flag">
<h3 v-if="flag">hello my world</h3>
</div>
<script src="./lib/Vue.js"></script>
<script src="./lib/vue-resource.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:false
},
methods:{
}
})
</script>使用过度类名实现动画
首先,将要设置的区域用transition包裹起来
然后通过自定义两组样式来设置动画;
/* v-enter [这是一个时间点]是进入之前,元素的起始状态,此时还没有开始进入
v-leave-to [这是一个时间点]是动画离开之后,离开的终止状态,此时,元素动画已经结束 */
/* v-enter-active [入场动画的时间段] */
/* v-leave-active [离场动画的时间段]*/
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* v-enter [这是一个时间点]是进入之前,元素的起始状态,此时还没有开始进入
v-leave-to [这是一个时间点]是动画离开之后,离开的终止状态,此时,元素动画已经结束 */
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(80px)
}
/* v-enter-active [入场动画的时间段] */
/* v-leave-active [离场动画的时间段]*/
.v-enter-active,.v-leave-active{
transition:all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="切换" @click="flag=!flag">
<transition>
<h3 v-if="flag">hello my world</h3>
</transition>
<hr>
<input type="button" value="切换" @click="flag2=!flag2">
<transition>
<h6 v-if="flag2">hello my world</h6>
</transition>
</div>
<script src="./lib/Vue.js"></script>
<script src="./lib/vue-resource.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:false,
flag2:false
},
methods:{
}
})
</script>
</body>
</html>使用自定义类名实现动画
继续沿用上面的代码,我们稍作修改,将第二个切换动画使用自定义的类名来实现动画
首先,在transition的标签内 定义属性 name =" 样式的前缀名"
这个前缀名是用来替代v 因为vue的自带都是v-kai开头 我们自定义之后 就可以取代V
<input type="button" value="切换" @click="flag2=!flag2">
<transition name="my">
<!-- 定义name为my之后 以后样式的类名开头不是v- 而是my- -->
<h6 v-if="flag2">hello my world</h6>
</transition>然后修改style样式 :
.my-enter,.my-leave-to{
opacity: 0;
transform: translateX(70px)
}
.my-enter-active,.my-leave-active{
transition:all 1s ease;
}这需要改动和创建这两个部分,就可以实现使用自定义类名来调整动画
使用animate类实现动画
首先要引入animate的样式文件,我们直接用cdn就可以:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">接下来,同样的道理,用transition来包裹要实现动画的区域:
然后在标签内设置属性:
<transition enter-active-class=" bounceIn"
leave-active-class=" bounceOut"
:duration="{ enter:200 , leave:400}">
<h3 v-if="flag" class="animated">hello my world</h3>
</transition>enter-active-class代表入场动画的类名 这是属于animate的类名
leave-active-class代表离场动画的类名 这是属于animate的类名
:duration 来设置动画的入场和离场的总时长
使用钩子函数实现半场动画
首先了解动画的入场动画的生命周期函数 @before-enter @enter @after-enter
那么该如何应用呢?
像上述一样 将要制作成动画的区域用transition包裹起来 标签内引入三个函数
<div id="app">
<input type="button" value="快到碗里来" @click="flag=!flag">
<!-- 入场动画的生命周期 @before-enter @enter @after-enter -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>接下来是对这三个函数进行操作:代码的解读都写在注释中
<script>
var vm = new Vue({
el:'#app',
data:{
flag:false
},
methods:{
beforeEnter(el){//设置元素开始动画之前的起始样式
el.style.transform = "translate(0,0)"
},
enter(el,done){//表示动画开始之后的样式,
el.offsetWidth//会强制动画刷新
el.style.transform = "translate(150px,450px)"
el.style.transition = 'all 1s ease'
done()//done 是afterEnter函数的引用
},
afterEnter(el){//表示动画完成之后的样式
this.flag = !this.flag
}
}
})
</script>将动画应用到列表中
大致讲解下代码;列表的数据是通过v-for循环出来的,
在这边就要注意 不能用transition来包裹从而实现动画
因为transition针对的是单个对象 v-for明显是一组数据
所以要用transition-group
transition-group标签内的 appear属性 是实现入场时候递进的效果
tag属性,指定transition-group渲染为指定的元素,如果不指定,默认为span
css代码:
<style>
li{
border: 1px dashed #999999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 10px;
width: 100%;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(80px)
}
.v-enter-active,
.v-leave-active{
transition: all 0.6s ease
}
li:hover{
background-color: hotpink;
transition: all 0.4s ease;
}
v-move{
transition: all 0.6s ease
}
v-leave-active{
position: absolute
}
</style>html代码:
<div id="app">
<div>
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 用v-for渲染的数据 不能用transition来包裹 要用transition-group -->
<!-- 添加appear属性 实现入场时候递进效果 -->
<!-- 设置tag属性,指定transition-group渲染为指定的元素,如果指定,默认为span -->
<transition-group appear tag="url">
<li v-for="(item,index) in list " :key="item.id" @click="del(index)">
{{item.id}}--{{ item.name}}
</li>
</transition-group>
</div>JS代码:
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1,name:'泽山'},
{id:2,name:'泽宇'},
{id:3,name:'泽信'},
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name})
this.id = this.name =''
},
del(index){
this.list.splice(index,1)
}
}
})
</script>技术有限,关于动画方面的知识写到这里,欢迎在评论区留言交流