本文最后更新于 870 天前，其中的信息可能已经有所发展或是发生改变。
1. 使用过渡类
代码语言：javascript复制<style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(200px)
}
.v-enter-active,.v-leave-active{
transition: all 0.8s ease
}
</style>
<transition>
<h1 v-if="flag">Hello</h1>
</transition>- 修改前缀v-，使用局部定义
.my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(70px);
}
.my-enter-active,
.my-leave-active{
transition: all 0.8s ease;
}
<transition name="my">
<h6 v-if="flag2">这是一个H6</h6>
</transition>2. 使用第三方类
代码语言：javascript复制<link rel="stylesheet" href="../lib/animate.css"> <!-- 使用 :duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场的时长 -->
<transition
enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut"
:duration="{enter:200,leave:400}"
>
<h1 v-if="flag">Hello</h1>
</transition>Animate样式参考
3. 使用钩子函数模拟小球半场动画（类似添加商品到购物车）
代码语言：javascript复制<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style><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)"
},
enter(el, done){
// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
// 可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform = "translate(150px, 450px)"
el.style.transition = 'all 1s ease'
// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
done()
},
afterEnter(el){
// 动画完成之后，会调用 afterEnter
// console.log('ok')
this.flag = !this.flag
}
}
});
</script>4. 列表动画
代码语言：javascript复制 <style>
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><!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 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>Post Views: 356
