1. 使用过渡类名实现动画
1.1 使用v-if控制元素的显示与隐藏
<body>
<div id="app">
<input type="button" value="点击" @click="flag = !flag" />
<h1 v-show="flag">这是一个h1标签</h1>
</div>
<script>
// 创建Vue实例，得到viemodel
var vm = new Vue({
el:'#app',
data:{
msg:'你好啊世界！世界！',
flag:false // 定义标记变量，默认值为false，表示默认不显示
},
methods:{
}
});
</script>
</body>这种方式虽然可以实现效果，但是元素的显示与隐藏都很突兀，体验不是很好
1.2 使用过渡类名来实现动画
1. 需要动画的元素必须用transition标签包裹住
2. 在style标签中写四个类的相应样式
例如：
<!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>Document</title>
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue_2.6.1.js"></script>
<link rel="stylesheet" href="./lib/bootstrap.css"></link>
<!--
作者：zoudmbean@163.com
时间：2019-06-23
描述：自定义两组样式，来控制transition内部的元素实现动画
-->
<style>
/*
.v-enter 这是一个时间点，是动画开始之前，元素的起始状态，此时还没有开始进入
.v-leave-to 这是一个时间点，是动画离开之后，离开的终止状态，此时，元素动画已经结束
* */
.v-enter,
.v-leave-to{
opacity: 0; /* 表示动画开始和结束之后状态保持一致 */
transform: translateX(100px); /* 表示动画从水平X轴100像素的位置开始 */
}
/*
.v-enter-active 入场动画的时间段
.v-leave-active 离场动画的时间段
* */
.v-enter-active,
.v-leave-active{
transition:all 1s ease; /* 表示 transition包裹的所有元素都执行该动画*/
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="flag = !flag" />
<!--
作者：zoudmbean@163.com
时间：2019-06-23
描述：需要动画描述的元素都用transition标签括起来
-->
<transition>
<h1 v-show="flag">这是一个h1标签</h1>
</transition>
</div>
<script>
// 创建Vue实例，得到viemodel
var vm = new Vue({
el:'#app',
data:{
msg:'你好啊世界！世界！',
flag:false // 定义标记变量，默认值为false，表示默认不显示
},
methods:{
}
});
</script>
</body>
</html>
注意：
1. 类名动画分为两种，一种是表示动作的一组.v-enter与.v-leave-to；另一种是表示时间段的.v-enter-active与.v-leave-active
2. 需要做动画的元素需要用transition标签包裹住
1.3 使用自定义前缀来区分不同的动画效果
当我们有两个transition标签包裹的元素的时候，我们需要让两者执行不同的动画效果，这时候，用v-就不合适了，我们需要自定义前缀来区分不同的动画效果
1. 方法：
1.1 给transition标签添加name属性，比如其属性值为my
1.2 在定义动画类的时候，不用v-前缀了，改为my-前缀
例如：
/*
自定义动画类
* */
.my-enter,
.my-leave-to{
opacity: 0; /* 表示动画开始和结束之后状态保持一致 */
transform: translateX(100px); /* 表示动画从水平X轴100像素的位置开始 */
}
/*
.my-enter-active 入场动画的时间段
.my-leave-active 离场动画的时间段
* */
.my-enter-active,
.my-leave-active{
transition:all 1s ease; /* 表示 transition包裹的所有元素都执行该动画*/
}
<transition name='my'>
<h6 v-show="flag1">这是一个h6标签</h6>
</transition>1.4 使用第三方类库animate.css来实现动画效果
1.4.1 使用步骤：
1. 导入animate.css样式文件
<link rel="stylesheet" href="./lib/animate.css"></link>2. 在transition标签上写对应的动画效果类名
<div id="app">
<input type="button" value="点击" @click="flag = !flag" />
<!-- enter-active-class 表示进入阶段 leave-active-class 表示离开阶段 -->
<transition enter-active-class="anmate bounceIn" leave-active-class="animate bounceOut">
<h1 v-show="flag">这是一个h1标签</h1>
</transition>
</div>注意：
1. 写对应的动画类的时候，需要加animate基础类animate
2. 如上所示，在transaction标签上要写两次animate，比较繁琐，可以使用下面的方式
<transition enter-active-class="bounceIn" leave-active-class="bounceOut">
<h1 v-show="flag" class="animate">这是一个h1标签</h1>
</transition>1.4.2 使用duration来设置入场和离场的动画时长
1. 用duration="毫秒值"统一设置
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="8000">
<h1 v-show="flag" class="animate">这是一个h1标签</h1>
</transition>2. 用duration="{enter:200,leave:600}"分别设置出场离场时间
<transition enter-active-class="anmate bounceIn"
leave-active-class="animate bounceOut" :duraton="{enter:100,leave:900}">
<h1 v-show="flag">这是一个h1标签</h1>
</transition>1.5 使用钩子函数实现动画效果
1.5.1 js钩子
可以在属性中声明js钩子
<!-- 前四个属性是入场钩子，后四个属性是出场钩子 -->
<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"
>
<!-- ... -->
</transition>
// ...
methods: {
// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以在其中设置元素动画之前的起始样式
beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}注意：
1. 动画钩子函数的第一个参数el，表示要执行动画的那个DOM元素，是一个原生的js的DOM对象，el就相当于document.getElementByid(id)
2. 第二个参数done：其实就是afterEnter这个函数，也即done为afterEnter函数的引用，其作用为让动画完成之后，立即消失。
3. 各个函数的含义
3.1 beforeEnter：表示动画入场之前，此时，动画尚未开始，可以在其中设置元素动画之前的起始样式
3.2 Enter：表示动画开始之后的样式，这里，可以设置小球完成动画之后的结束状态。
3.3 afterEnter：表示动画之后，会调用该方法
1.5.2 使用js钩子实现小球移动的例子
<!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>Document</title>
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue_2.6.1.js"></script>
<link rel="stylesheet" href="./lib/bootstrap.css"></link>
<link rel="stylesheet" href="./lib/animate.css"></link>
<style>
/* 定义一个圆球 */
.ball {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
margin: 40px;
}
.btn {
margin: 10px;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="动起来" @click="flag = !flag" class="btn"/>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
// 创建Vue实例，得到viemodel
var vm = new Vue({
el:'#app',
data:{
flag:false
},
methods:{
beforeEnter(el){
// 定义开始动画之前的起始位置 transform 表示位移
el.style.transform="translate(0,0)";
},
// 表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
enter(el,done){
el.offsetWidth; // 只要和offset相关的都可以实现动画，这个话没什么意义，但是，不加动画效果不明显
el.style.transform="translate(150px,450px)"; // 移动的结束地方
el.style.transition="all 1s ease"; // 移动1秒钟
// 让动画完成之后，立即消失，显示的调用一下done函数，
// 这个done其实就是afterEnter这个函数，也即done为afterEnter函数的引用
done();
},
// 表示动画之后，会调用该方法
afterEnter(el){
console.log("ok");
/*
这句话的作用：
1. 控制小球的显示与隐藏
2. 直接跳过后半场动画，让flag标识符直接变为false，当第二次在此点击按钮的时候，还是从false-true的过程
*/
this.flag = !this.flag; //
}
}
});
</script>
</body>
</html>
扫一扫
1624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
