Vue中的css动画原理
vue中的动画原理其实就是,css3中的transition属性。
当一个元素被transition包裹的时候,vue会自动分析一下元素的css样式,然后构建一个动画的流程,在动画即将被执行的一瞬间,他会往内部的div上增加两个class名字,分别是fade-enter,和fade-enter-active。当动画第一帧执行结束之后,transition这个标签vue分析过,知道他是一个动画效果的时候,vue会在动画运行到第二帧的时候,帮助你干两件事情,这个时刻vue会把之前添加的fade-enter这个class给去掉,然后增加一个fade-enter-to这样的一个class的名字。接着动画会继续执行,执行到结束的这一瞬间,vue会干一件事情,他会把之前添加的fade-enter-active和fade-enter-to这两个Class给去除掉。
例子:
注意看代码中的注释!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画</title>
<script src="../lib/vue.js"></script>
</head>
<!-- 2.自定义两组样式,来控制 transition 内部的元素实现动画 -->
<style>
/* v-enter 【这是一个时间点】是进入之前,元素的起始状态,此时还没有开始进入 */
/* v-leave-to 【这是个时间点】 是动画离开之后,离开的终止状态,此时,元素动画已经结束 */
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(250px);
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,.v-leave-active{
transition: all 1s ease;
}
</style>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求:点击按钮,让h3显示,再点击,隐藏 -->
<!-- 1.使用 transition 元素把需要被动画控制的元素,包括起来 -->
<!-- transition 元素,是 Vue 官方提供的 -->
<transition>
<h3 v-if="flag">这是一个h3</h3>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
})
</script>
</body>
</html>
在Vue中修改v-前缀
对于这些过渡中切换的类名来说,如果你使用一个没有名字的
<transition>
,则v-
是这些类名的默认前缀。如果你使用了<transition name="my">
,那么v-enter
会替换成my-enter
。
例子:
注意看代码中的注释!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画</title>
<script src="../lib/vue.js"></script>
</head>
<!-- 2.自定义两组样式,来控制 transition 内部的元素实现动画 -->
<style>
/* 自定义前缀的动画类 */
.my-enter,.my-leave-to{
opacity: 0;
transform: translateY(100px);
}
/* my-enter-active 【入场动画的时间段】 */
/* my-leave-active 【离场动画的时间段】 */
.my-enter-active,.my-leave-active{
transition: all 1s ease;
}
</style>
<body>
<div id="app">
<!-- 需求:点击按钮,让h3显示,再点击,隐藏 -->
<!-- 1.使用 transition 元素把需要被动画控制的元素,包括起来 -->
<!-- transition 元素,是 Vue 官方提供的 -->
<input type="button" value="toggle2" @click="flag2=!flag2">
<transition name="my">
<h2 v-if="flag2">这是一个h2</h2>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag2: false
},
methods: {}
})
</script>
</body>
</html>
在Vue中使用第三方类库animate.css
下载 animate.css 并引入
例子:
注意看代码中的注释!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../lib/animate.css">
</head>
<!-- 入场 bounceIn -->
<!-- 离场 bounceOut -->
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求:点击按钮,让h3显示,再点击,隐藏 -->
<!-- 必须加animated 这个基本的类 ,后边的那些类名效果,从animate.css官网找就行了-->
<!-- 使用 :duration="毫秒值" 来设置 入场 或者 离场 时候的动画时长 -->
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="300">
<h3 v-if="flag">这是一个h3</h3>
</transition>
<!-- 第二种写法 -->
<!-- 使用 :duration="{enter:500,leave:1000}" 来分别设置 入场时长 和 离场时长 -->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:500,leave:1000}">
<h3 v-if="flag" class="animated">这是一个h3</h3>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
})
</script>
</body>
</html>
在Vue中动画特效的钩子函数
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
注意:这里都是通过 v-on:
绑定的事件函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>钩子函数</title>
<script src="../lib/vue.js"></script>
</head>
<style>
.box{
width:100px;
height:100px;
background-color:red;
}
</style>
<body>
<div id="app">
<input type="button" value="加入" @click="flag=!flag">
<transition v-on:before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-show="flag" class="box"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
// 注意:动画钩子函数的第一个参数:el ,表示 要执行动画的那个DOM元素
// 是个原生的 JS DOM对象。(大家可以认为,el 是通过 document.getElementById('') 方式获取得到的原生JS DOM对象)
beforeEnter: function (el) {
// before-enter 表示动画入场之前,此时,动画尚未开始,可以在 before-enter中,设置元素
// 开始动画之前的起始样式
},
enter: function (el, done) {
// 下边这句话没有实际的作用,但是如果不写,出不来动画效果
// 可以认为 el.offsetWidth 会强制动画刷新(有width 就有height、left,只要跟offset有关都可以)
el.offsetWidth;
// enter 表示动画,开始之后的样式,这里可以设置小球完成动画之后的结束状态
// 这里的done 其实就是 after-enter函数,也就是说:done 是 after-enter函数的引用(回调相当于引用执行after-enter函数)
done()
},
afterEnter(el) {
// 动画完成之后,会调用的 after-enter 函数
this.flag = !this.flag; //做完,动画没有立即消失,如果立即消失,必须在enter函数中,加done参数
}
}
})
</script>
</body>
</html>
在下一遍文章中做一个案例,具体用一下钩子函数。有兴趣的可以看一下。
在Vue中列表过渡动画
- 在实现列表过渡的时候,如果需要过渡的元素,是通过
v-for
循环渲染出来的。不能使用
transition
包裹,需要使用transition-group
- 如果要为
v-for
循环创建的元素设置动画,必须为每一个元素设置:key
属性 - 给
transition-group
添加appear
属性,实现页面刚渲染出来的时候,入场的时候效果 - 通过 为
transition-group
元素,设置tag
属性,指定transition-group
渲染为指定的元素标签,如果不指定tag
属性,默认 渲染为span
标签
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表动画</title>
<script src="../lib/vue.js"></script>
</head>
<style>
li {
border: 1px dashed #999;
margin:5px;
line-height: 3;
font-size: 12px;
/* 设置width:100% 因为离开的时候,定位绝对定位,脱离标准文档流,宽度只有内容撑起来 */
width: 100%;
}
li:hover{
background-color: hotpink;
transition: all .8s ease-in;
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,.v-leave-active{
transition: all 1s ease;;
}
/* 下面的 .v-move 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地飘上来的效果 */
.v-move{
transition: all .6s ease;
}
.v-leave-active{
position: absolute;
}
</style>
<body>
<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>
<!-- <ul> -->
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的。不能使用
transition 包裹,需要使用 transition-group -->
<!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个元素设置 :key 属性 -->
<!-- 给transition-group 添加 appear 属性,实现页面刚展示出来的时候,入场的时候效果 -->
<!-- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素标签,
如果不指定 tag 属性,默认 渲染为 span 标签 -->
<!-- 这里如果不设置 tag 属性,transition-group 会渲染为默认的 span 标签,则代码结构为 ul>span>li ,不符合代码规范-->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}} ---- {{item.name}}
</li>
</transition-group>
<!-- </ul> -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
id: 1,
name: '小明'
}, {
id: 2,
name: '小红'
}, {
id: 3,
name: '小李'
}, {
id: 4,
name: '小刘'
}]
},
methods: {
add() {
this.list.push({
id: this.id,
name: this.name
})
this.id = this.name = ''
},
del(i) {
this.list.splice(i, 1);
}
}
});
</script>
</body>
</html>