vue-列表过度

最新推荐文章于 2022-03-10 22:44:00 发布

@Tiramisu

最新推荐文章于 2022-03-10 22:44:00 发布

阅读量190

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105036999

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

列表过渡(设置key)

不同于 transition，它会以一个真实元素呈现，默认为一个。也可以通过 tag 特性更换为其他元素。

提供唯一的 key 属性值
列表过渡动画标签transition-group

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <style>
        .bounce-enter-active {
            animation: bounce-in .5s;
        }

        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }

        @keyframes bounce-in {
            0% {
                transform: translateX(100px);
                opacity: 0;
            }

            100% {
                transform: translateX(0px);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="text" v-model="mytext" /> {{mytext}}
        <button @click="handleAddClick">add</button>

        <transition-group tag="ul" name="bounce">
            <li v-for="(data,index) in datalist" :key="data">
                {{data}}---{{index}}
                <button @click="handleDelClick(index)">del</button>
            </li>
        </transition-group>

    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#box",
            data: {
                datalist: [],
                mytext: "111111"
            },
            methods: {
                handleAddClick() {
                    this.datalist.push(this.mytext)
                },
                handleDelClick(index) {
                    console.log("delete", index);
                    //splice
                    this.datalist.splice(index, 1)
                }
            }
        })
        // 新老虚拟dom对比的时候会使用diff算法。
    </script>
</body>
</html>

@Tiramisu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-列表过度

列表过渡(设置key)不同于 transition，它会以一个真实元素呈现，默认为一个。也可以通过 tag 特性更换为其他元素。提供唯一的 key 属性值<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</titl...
复制链接

扫一扫