过渡效果
1.使用过度类名实现动画
过渡分成了2个部分，进入（Enter）和离开(Leave）
Enter:从不透明度为0到不透明度为1
v-enter:【这是一个时间点】，定义进入过渡的开始状态。在元素被插入之前生效
v-enter-to:【这是一个时间点】，定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效。
Leave:从透明度为1到透明度为0
v-leave:【这是一个时间点】，定义离开过渡的开始状态。在离开过渡被触发时立刻生效。
v-leave-to:【这是一个时间点】 ，定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，此时，元素动画已经结束
写个简单例子说明：
点击按钮，滑动出现h3
|
<!--自定义两组样式，来控制 transition 内部的元素实现动画--> <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 2s; } </style>
<div id="app"> <button @click="flag=!flag">点击</button> <!--1. transition 元素，是Vue 官方提供的--> <transition> <h3 v-if="flag">这是一个h3</h3> </transition> </div>
<script> let vm = new Vue({ el: '#app', data: { flag: true } }) </script> |
l 修改v-前缀(自定义前缀)
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
|
<style> .my-enter, .my-leave-to { opacity: 0; transform: translateY(-80px); } .my-enter-active, .my-leave-active { transition: all 2s; } </style> <body> <button @click="flag1=!flag1">点击</button> <!--1. transition 元素，是Vue 官方提供的--> <transition name="my"> <h6 v-if="flag1">这是一个h6</h6> </transition> </body> |
2.列表过渡
目前为止，关于过渡我们已经讲到：
l 单个节点
l 一次渲染多个节点
那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用<transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：
l 不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
l 元素 一定需要 指定唯一的 key 特性值
举例说明：
l 列表添加过渡
|
<div id="app"> <ul> <!--在实现列表过度的时候，如果需要过度的元素，是通过 v-for 循环渲染出来的，不能使用transition 包裹，需要使用transitionGroup--> <!--如果要为 v-for 循环创建的元素设置动画，必须为每一个元素 设置 :key 属性--> <transition-group> <li v-for="item in list" :key="item.id">{{item.id}}--- {{item.name}}</li> </transition-group> </ul> <label for="id">id:</label> <input type="text" v-model="id" id="id"> <label for="name">name:</label> <input type="text" v-model="name" id="name"> <button @click="add">添加</button> </div> <script> let vm = new Vue({ el: '#app', data: { list: [ {id: 1, name: '张三' }, {id: 2, name: '李四' }, {id: 3, name: '王五'}, {id: 4, name: '赵二' }, {id: 5, name: '王八'} ], id: '', name: '' }, methods: { add() { this.list.push({id: this.id, name: this.name}) this.id = '', this.name = '' } } }) </script>
<style> .v-enter, .v-leave-to { opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { transition: all 2s; } </style> |
l 删除过渡
在methods添加删除事件
|
del(i){ this.list.splice(i,1); //splice() 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。 }
<style> .v-enter, .v-leave-to { opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { transition: all 2s; }
/*下面的 .v-move和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐飘上来的效果*/ .v-move{ transition: all 3s ease; } .v-leave-active{ position: absolute; } </style>
<ul> <transition-group> <li v-for="(item,i) in list" :key="item.id" @click="del(i)"> {{item.id}}---{{item.name}}</li> </transition-group> </ul> |
l 实现入场时候的效果（ appear 属性）
<!--给 transition-group 添加 appear 属性，实现入场时候的效果-->
关于appear的用法和enter的用法相似，它只是在第一次渲染的时候才会起作用。
|
<transition-group appear> <li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}---{{item.name}}</li> </transition-group> |
l 解决 ul 标签下 span 包裹问题
l 解决方案
l 去掉外层的ul 标签，并给 transition-group 标签加 tag=“ul” 。
|
<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> |
注意：
1.通过v-for遍历多个元素时，不用transition而用transition-group包裹。同时，需要定义key属性。
2.transition-group还要两个属性，appear属性指定整体的列表渲染时的动画，tag="ul"为渲染transition-group时不当作<span>
标签（不符合规范），而是渲染成tag属性指定的标签类型。