Vue过渡效果

过渡效果

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

 Vue过渡效果

 

 

 

过渡分成了2个部分,进入(Enter)和离开(Leave)

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

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

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

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

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

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

 

 

写个简单例子说明:

 Vue过渡效果

 

 

 

点击按钮,滑动出现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 特性值

 

举例说明:

列表添加过渡

 Vue过渡效果

 

 

 

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

 

删除过渡

 Vue过渡效果

 

 

 

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

 

实现入场时候的效果( appear 属性)

 <!--给 transition-group 添加 appear 属性,实现入场时候的效果-->

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

 Vue过渡效果

 

 

 

<transition-group appear>

<li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}---{{item.name}}</li>

 </transition-group>

 

解决 ul 标签下 span 包裹问题

 Vue过渡效果

 

 

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属性指定的标签类型。

 

上一篇:POW快速密-高频


下一篇:剑指 Offer 17. 打印从1到最大的n位数