vue 使用key特性实现多元素过渡

最新推荐文章于 2022-05-11 09:01:33 发布

啊啊啊～～

最新推荐文章于 2022-05-11 09:01:33 发布

阅读量379

点赞数

分类专栏： js 文章标签： vue vue.js 多元素过渡 key

本文链接：https://blog.csdn.net/qq_40891322/article/details/109841900

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

vue 使用key属性实现多元素过渡

1.代码

由于和一个元素过渡代码只有一点点不同，直接贴代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue多元素过渡</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
    p{
        transform-origin: 0 50%;
        position: relative;
    }
    .mytr-enter,.mytr-leave-to{
        opacity: 0;
    }
    .mytr-enter-active{
        opacity: 1;
        animation: first 1s linear;
    }
    .mytr-leave-active{
        opacity: 1;
        animation: second 1s linear;
    }
    @keyframes first{
        0% {
            transform:scale(0);
        }
        50% {
            transform:scale(1.2,1.2);
        }
        100% {
            transform:scale(1);
        }
    }
    @keyframes second{
        0% {
            transform:scale(1);
        }
        40% {
            transform:rotate(45deg);
        }
        55% {
            transform:rotate(90deg);
        }
        85% {
            transform:rotate(45deg);
        }
        100% {
            transform:rotate(90deg);
        }
    }
</style>
</head>
<body>    
    <div id="app">
        <button v-on:click="show=!show">点击</button>
        <transition name="mytr" mode="out-in">
            <p v-if="show" key="sa">if there is a will, there is a way</p>
            <p v-else key="ta">If there is a will, there are ways</p>
        </transition>
    </div>
    <script>
        new Vue({
            el : '#app',
            data : {
                show : true
            }
        })
    </script>
</body>
</html>

2.关键代码分析

在这里插入图片描述
（1）如果没有设置key特性，那么点击按钮，页面并不会出现动画效果，只是简单地替换了文字。
（2）设置了key特性，没有设置 mode，那么一个元素的出现动画和另外一个元素的消失动画会同时在页面上面进行，看起来比较混乱。
（3）设置了key特性，也设置 mode，出现动画和消失动画会按顺序执行，效果正常
（4）mode取值
out-in：先让元素消失，然后让另一个元素出现。
in-out：先让元素出现，然后让另一个元素消失。

3.原因分析

Vue在多个元素切换过程中会尽量复用DOM，如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前节点的状态被保留下来，由此产生一系列的bug。所以需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

啊啊啊～～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 使用key特性实现多元素过渡

vue 使用key属性实现多元素过渡1.代码由于和一个元素过渡代码只有一点点不同，直接贴代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue多元素过渡</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style&
复制链接

扫一扫