过渡效果1.使用过度类名实现动画过渡分成了2个部分，进入（Enter）和离开(Leave）Enter:从不透明度为0到不透明度为1 v-enter:【这是一个时间点】，定义进入过渡的开始状态。在元素被插入之前生效 v-ent...

过渡效果

1.使用过度类名实现动画

过渡分成了2个部分，进入（Enter）和离开(Leave）

Enter:从不透明度为0到不透明度为1

v-enter:【这是一个时间点】，定义进入过渡的开始状态。在元素被插入之前生效

v-enter-to:【这是一个时间点】，定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效。

Leave:从透明度为1到透明度为0

v-leave:【这是一个时间点】，定义离开过渡的开始状态。在离开过渡被触发时立刻生效。

v-leave-to:【这是一个时间点】，定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，此时，元素动画已经结束

写个简单例子说明：

点击按钮，滑动出现h3

<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>

<h3 v-if="flag">这是一个h3</h3>

</transition>

</div>

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>

<h6 v-if="flag1">这是一个h6</h6>

</transition>

</body>

2.列表过渡

目前为止，关于过渡我们已经讲到：

l 单个节点

l 一次渲染多个节点

那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用<transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：

l 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。

l 元素 一定需要 指定唯一的 key 特性值

举例说明：

l 列表添加过渡

<ul>

<transition-group>

</transition-group>

</ul>

</div>

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>

</transition-group>

</ul>

l 实现入场时候的效果（ appear 属性）

关于appear的用法和enter的用法相似，它只是在第一次渲染的时候才会起作用。

<transition-group appear>

</transition-group>

l 解决 ul 标签下 span 包裹问题

l 解决方案

l 去掉外层的ul 标签，并给 transition-group 标签加 tag=“ul” 。

<transition-group appear tag="ul">

</transition-group>

注意：

1.通过v-for遍历多个元素时，不用transition而用transition-group包裹。同时，需要定义key属性。

2.transition-group还要两个属性，appear属性指定整体的列表渲染时的动画，tag="ul"为渲染transition-group时不当作<span>

标签（不符合规范），而是渲染成tag属性指定的标签类型。