Vue过渡效果

2021/4/8 18:25:13

编程Tag： vue transition 过渡 效果 id name enter active leave

本文主要是介绍Vue过渡效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

过渡效果

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

 



这篇关于Vue过渡效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程