24.VUE多标签过渡中key的使用

最新推荐文章于 2021-09-26 18:42:39 发布

休息休息夏

最新推荐文章于 2021-09-26 18:42:39 发布

阅读量257

点赞数 2

分类专栏： VUE基础学习文章标签： vue html css

本文链接：https://blog.csdn.net/qq_42881159/article/details/117303965

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

文章目录

1.代码展示
2.key的使用

1.代码展示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .v-enter-active,.v-leave-active{
            transition: all 2s;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <!--过渡模块：in-out表示新元素先过渡，完成之后当前元素再消失，/out-in当前元素先过渡，完成之后再进入-->
    <transition mode="out-in">
        <!--过渡元素中的if else一定要设置不同的key去要求VUE来强制刷新,否则只能切换显示，不能把过渡效果展示出来-->
        <button type="button" v-if="show" @click="show=false" key="show">显示</button>
        <button type="button" v-else @click="show=true" key="hide">隐藏</button>
    </transition>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            show:true,
        },
        methods: {},
    });
</script>
</html>

2.key的使用

在这里插入图片描述

<transition mode="out-in">
        <!--过渡元素中的if else一定要设置不同的key去要求VUE来强制刷新,否则只能切换显示，不能把过渡效果展示出来-->
        <button type="button" v-if="show" @click="show=false">显示</button>
        <button type="button" v-else @click="show=true" >隐藏</button>
    </transition>

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

休息休息夏

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
24.VUE多标签过渡中key的使用

文章目录1.代码展示2.key的使用1.代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> .v-enter-active,.v-leave-ac
复制链接

扫一扫