一.通过过滤类名实现动画
使用过滤类名实现动画：
1. 添加 transition组件包住元素
2. 设置样式 .v-enter，v-enter-to…和设置触发动画的事件
3. 设置元素 v-if或者v-show
- v-enter：动画进入之前的初始状态
- v-enter-to：动画进入之后的结束状态
- v-enter-active：动画进入的时间段
PS：第一、第二个是时间点；第三个是时间段。
动画离开：
- v-leave：动画离开之前的初始状态
- v-leave-to：动画离开之后的结束状态
- v-leave-active：动画离开的时间段
PS：第一、第二个是时间点；第三个是时间段。
修改过渡类名的前缀
----.v-enter、.v-leave-to这些过渡类名都是以v-开头的。
这样做，会有一个局限性：假设有两个DOM元素都用<transition>进行了包裹，
那这两个DOM元素就都具备了v-中所定义的动画。
----可通过自定义别名
<transition name="my">
<h6 v-if="flag2">这是一个H6</h6>
</transition>
.my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(70px);
}
实例:
样式：
<style>
div {
height: 200px;
}
/*
v-enter：进入之前的状态
v-leave-to： 离场之后的状态
*/
.v-enter,
.v-leave-to {
opacity: 0;
color: red;
transform: translateX(150px);
}
/*
v-enter-active： 入场动画的过程
v-leave-active： 离场动画的过程
*/
.v-enter-active,
.v-leave-active {
transition: all 1s;
position: absolute;
}
.sjf-enter,
.sjf-leave-to {
opacity: 0;
transform: translateY(150px);
}
.sjf-enter-active,
.sjf-leave-active {
transition: all 1s;
position: absolute;
}
</style>
body页面：
<!--
使用过滤类名实现动画：
1. 添加 transition组件包住元素
2. 设置样式 .v-enter...
3. 设置元素 v-if或者v-show
-->
<div id="app">
<div>
<!-- 点击按钮，显示h1，再点击，隐藏-->
<button @click="flag=!flag">显示效果</button>
<transition>
<h1 v-show="flag">黄捷</h1>
</transition>
</div>
<div>
<!--点击按钮，显示h1,在点击，隐藏----动画效果竖直方向-->
<button @click="flag1=!flag1">显示效果</button>
<!--vue提供了一个属性name，设置不同的动画，修改v-前缀-->
<transition name="sjf">
<h1 v-if="flag1">孙俊芳</h1>
</transition>
</div>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
flag: true,
flag1: true
},
methods: {}
})
</script>
二.使用第三方类库实现动画
1.引入animate组件
2.通过设置好的动画样式设置动画
3.只需增加transition和动画结束后的结果事件
<transition enter-active-class="bounceIn" leave-active-class="bounceOut">
<h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>
三.通过钩子函数设置动画
只有出场动画、没有离场动画，这种就是属于半场动画。比如你把一件商品加入收藏，会出现一个动画；当再次点击收藏按钮的时候却看不到动画效果，这就说明，只有前一半才有动画。
半场动画，可以使用钩子函数来实现
<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”
我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，
我们要紧接着在methods中定义八个函数。
如果要定义半场动画，做法是：直接在methods中写入场动画的函数，
不写离场动画的函数即可。
实例:
<!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>
<script src="vue2.5.16.js"></script>
<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="加入购物车" @click="flag=!flag">
<!-- 1. 使用 transition 元素把 小球包裹起来 -->
<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: {
// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
// 我们可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
beforeEnter(el) {
// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
// 设置小球开始动画之前的 起始位置
el.style.transform = "translate(0, 0)" // smyhvae提示：一开始的时候，让小球处于（0，0）的位置
},
enter(el, done) {
// 【注意1】el.offsetWidth 这句话，没有实际的作用，但是，如果不写，出不来动画效果。可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform = "translate(150px, 300px)" // smyhvae 提示：让小球从（0，0）移动到 (150px, 300px)
el.style.transition = 'all 1s ease'
// 【注意2】这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
done()
},
afterEnter(el) {
// 动画完成之后，会调用 afterEnter
// console.log('ok')
// 动画结束后，让小球消失（直接让 flag 取反即可）
this.flag = !this.flag // 因为最开始的时候，小球就是处于消失的状态，这行代码可以让小球的动画重新开始
}
}
});
</script>
</body>
</html>
四.设置列表动画
在一个列表中，如果我想给指定的某个li添加动画效果，该怎么做呢？
如果我们用transition把li包裹起来，就会让所有的li都具备了动画，这显然是不可取的。
那该怎么做呢？这里我们就可以用transition-group进行包裹。
<!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>
<script src="vue2.5.16.js"></script>
<style>
li {
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
width: 100%;
}
li:hover {
background-color: hotpink;
transition: all 0.8s ease;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
/* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
.v-move {
transition: all 0.6s ease;
}
.v-leave-active {
position: absolute;
}
</style>
</head>
<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 包裹，需要使用 transitionGroup -->
<!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
<!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
<!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
<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>
// 创建 Vue 实例，得到 ViewModel
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>
2419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
