Vue的过渡

轮孑哥

已于 2023-02-23 09:54:57 修改

阅读量2.5k

点赞数 3

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-11-06 23:13:02 首次发布

本文链接：https://blog.csdn.net/qq_46149597/article/details/127720420

版权

vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

5、元素过渡使用JavaScript钩子函数

单元素过渡

1、css过渡

Vue.js提供了内置的过渡封装组件transition，该组件用于包含要实现过渡效果的DOM元素。transition组件只会把过渡效果应用到其它包含的内容上，而不会额外渲染DOM元素。过渡封装组件的语法格式如下:

<transition name="nemeoftransition"><div></div></transition>

语法中的nameoftransition参数用于自动生成CSS过渡类名。

为元素和组件添加过渡效果主要应用在下列情形中：

条件渲染（使用v-if指令）
条件展示（使用v-show指令）
动态组件
组件根节点

CSS过渡的基础用法:

<style>
    .ikun-enter-active,.ikun-leave-active{
        transition: opacity 2s;
    }
    .iukn-enter,.ikun-leave-to{
        opacity: 0;
    }
</style>
<div id="element">
    <div>
        <button v-on:click="show=!show">切换</button>
        <transition name="ikun">
            <p v-if="show">荔枝，你让我拿什么荔枝啊？</p>
        </transition>
    </div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
           show:true
        }
    })

</script>

2、过渡的类名介绍：

class类名	说明
v-enter	定义进入过渡的开始状态，在元素被插入之前生效，在元素插入的下一帧移除
v-enter-active	定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡、动画完成之后移除。这个类可以被用来定义进入过渡的过程时间、延迟和曲线函数
v-enter-to	定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡、动画完成之后移除
v-leave	定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
v-leave-active	定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡、动画完成之后移除。这个类可以被用来定义离开过渡的过程时间、延迟和曲线函数
v-leave-to	定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效（与此同时v-leave被移除），在过渡、动画完成之后移除

对于这些在过渡中切换的类名来说，如果使用一个没有名字的<transition>，则v-是这些类名的默认前缀。

3、CSS动画

CSS动画和的用法和CSS过度类似，但是在动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除。以缩放的动画形式隐藏和显示文字的示例代码如下：

<style>
    p{
        font: 30px;
        margin: 30px auto;
        font-weight: 500;
        color: green;
    }
    /**设置animation属性的参数**/
    .ikun-enter-active{
        animation: scaling 1s;
    }
    .ikun-leave-active{
        animation: scaling 1s reverse;
    }
    /**设置元素的缩放转换**/
    @keyframes scaling{
        0%{
            transform: scale(0);
        }
        50%{
            transform: scale(1.2);
        }
        100%{
            transform: scale(1);
        }
    }
</style>
<div id="element">
    <div>
        <button v-on:click="show=!show">切换</button>
        <transition name="ikun">
            <p v-if="show">他拿姜拿到手软，你打字打到手软，所以这就是区别。你有什么资格黑他?</p>
        </transition>
    </div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
           show:true
        }
    })

</script>

4、自定义过渡的类名：

除了使用普通的类名(如*-enter、*-leave)之外，也可以自定义过渡类名。自定义过渡的类名的优先级高于普通的类名。通过自定义普通过渡类名可以使用过渡系统和其它第三方CSS动画库（如animate.css）的组合。自定义过渡类名可以通过以下6个属性实现:

enter-class
enter-active-class
entet-to-class
leave-class
leave-active-class
leave-to-class

使用示例：

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<style>
    p {
        font: 30px "微软雅黑";
        margin: 30px auto;
        font-weight: 500;
        color: green;
        
    }
</style>
<div id="element" align="center">
    <button v-on:click="show=!show">切换</button>
    <transition name="rotate" enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
        <p v-if="show">他拿姜拿到手软，你打字打到手软，所以这就是区别。你有什么资格黑他?</p>
    </transition>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
            show: true
        }
    })

</script>

5、元素过渡使用JavaScript钩子函数

元素过渡还可以使用JavaScript钩子函数来实现，实现文字显示和隐藏时的不同效果示例：

<style>
    p{
        font: 30px;
        margin: 30px auto;
        font-weight: 500;
        color: green;
    }
    /**设置元素的缩放转换**/
    @keyframes scaling{
        0%{
            transform: scale(0);
        }
        50%{
            transform: scale(1.2);
        }
        100%{
            transform: scale(1);
        }
    }
    /**创建旋转动画**/
    @-webkit-keyframes rotate{
        0%{
            -webkit-transform:rotateZ(0) scale(1);
        }
        50%{
            -webkit-transform:rotateZ(350deg) scale(0.6);
        }
        100%{
            -webkit-transform:rotateZ(720deg) scale(0.1);
        }
    }
</style>
<div id="element" align="center">
    <div>
        <button v-on:click="show=!show">切换</button>
        <transition v-on:enter="enter" v-on:leave="leave" v-on:after-leave="afterLeave">
            <p v-if="show">作为一名ikun真的已经麻木了 ，解释没用，去反驳得到的只会是一堆表情包</p>
        </transition>
    </div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
           show:false
        },
        methods:{
            enter:function(el,done){
                el.style.opacity=1;
                el.style.animation='scaling 1s' //实现缩放
            },
            leave:function(el,done){
                el.style.animation='rotate 2s linear'   //实现旋转
                setTimeout(function(){
                    done()
                },2000)
            },
            afterLeave:function(el){    
                el.style.opacity=0;     //在leave函数中触发回调后执行afterLeave函数
            }
        }
    })

</script>

多元素过渡

1、基础用法：

最常见的多元素过渡是一个列表和描述这个列表为空消息的元素之间的过渡。在此处理多元素过渡时可以使用v-if和v-else。示例：

<style>
    .ikun-enter-active,.ikun-leave-active{
        transition: opacity 0.5s;
    }
    .iukn-enter,.ikun-leave-to{
        opacity: 0;
    }
</style>
<div id="element">
    <div>
        <button v-on:click="clear">清空</button>
        <transition name="ikun">
            <ol v-if="items.length > 0">
                <li v-for="item in items">{{item}}</li>
            </ol>
            <p v-else>列表为空</p>
        </transition>
    </div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
           items:['唱','跳','rap','篮球']
        },
        methods:{
            clear:function(){
                this.items.splice(0);//清空数组
            }
        }
    })

</script>

2、key属性

当有相同标签名的多个元素进行切换时，需要使用key属性设置唯一的值来标记以让Vue来区分他们。示例：

<style>
    .ikun-enter-active,.ikun-leave-active{
        transition: opacity 1s;
    }
    .iukn-enter,.ikun-leave-to{
        opacity: 0;
    }
</style>
<div id="element">
    <div>
        <button v-on:click="show=!show">切换</button>
        <transition name="ikun">
            <p v-if="show" key="lizhi">荔枝，你让我拿什么荔枝啊？</p>
            <p v-else key="kun">北冥有鱼,其名为鲲</p>
        </transition>
    </div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
           show:true
        }
    })

</script>

3、过渡模式

在<transition>的默认行为中，元素的进入和离开是同时发生的。由于同时生效的进入和离开的过渡不能满足所有要求，所以Vue.js提供了如下两种过渡模式:

in-out :新元素先进行过渡，完成之后当前元素过渡离开
out-int :当前元素先进行过渡，完成之后新元素过渡进入

<style>
    .ikun-enter-active,.ikun-leave-active{
        transition: opacity 1s;
    }
    .iukn-enter,.ikun-leave-to{
        opacity: 0;
    }
</style>
<div id="element">
    <div>
        
        <transition name="ikun" mode="out-in">
            <button v-on:click="show=!show" :key="show">{{show ? '显示':'隐藏'}}</button>
        </transition>
    </div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
           show:true
        }
    })

</script>

多组件过渡

多个组件的过渡不需要使用key属性，只需要使用动态组件，示例如下:

<style>
    .ikun-enter-active,.ikun-leave-active{
        transition: opacity 1s;
    }
    .iukn-enter,.ikun-leave-to{
        opacity: 0;
    }
</style>
<div id="element">
    <div>
        <button v-on:click="change">切换组件</button>
        <transition name="ikun" mode="out-in">
            <component :is="componentName"></component>
        </transition>
    </div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
           componentName:'componentA'
        },
        components:{
            componentA:{
                template:'<p>组件A</p>'
            },
            componentB:{
                template:'<p>组件B</p>'
            }
        },
        methods:{
            change:function(){
                this.componentName=this.componentName=='componentA'?'componentB':'componentA';
            }
        }
    })

</script>

列表过渡

实现列表过渡需要使用v-for和<transition-group>组件，该组件的特点如下。

与<transition>组件不同，它会以一个真实元素呈现，默认为一个<span>元素。可以通过tag属性更换为其它元素
过渡模式不可用，因为不再相互切换特有的元素
列表中的元素需要提供唯一的key属性值

实现数字列表中插入和移除数字时的过渡效果,示例如下：

<style>

    .list-item{
        display: inline-block;
        margin-right: 10px;
        background-color: darkgray;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: greenyellow;
    }
    /**插入过程和移除过程的过渡效果**/
    .ikun-enter-active,.ikun-leave-active{
        transition: all 1s;
    }
    /**开始插入和移除结束时的状态**/
    .iukn-enter,.ikun-leave-to{
        opacity: 0;
        transform: translateY(30px);
    }
</style>
<div id="element">
    <div>
        <button v-on:click="add">插入一个数字</button>
        <button v-on:click="remove">移除一个数字</button>
        <transition-group name="ikun" tag="p">
            <span v-for="item in items" v-bind:key="item" class="list-item">
                {{item}}
            </span>
        </transition-group>
    </div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
           items:[1,2,3,4,5,6],
           nextNum:7
        },
        methods:{
            //生成随机索引
            randomNumber:function(){
                return Math.floor(Math.random*this.items.length)
            },
            //添加数字
            add:function(){
                this.items.splice(this.randomNumber(),0,this.nextNum++)
            },
            //移除数字
            remove:function(){
                this.items.splice(this.randomNumber(),1)
            }
        }
    })

</script>