transition-group_MajorMe的博客-程序员秘密

transition-group的使用

代码：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./lib/vue-2.4.0.js"></script>
        <script src="./lib/iview.min.js"></script>
        <script src="./lib/vue-resource-1.3.4.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 通过v-for渲染的dom，需要用<transition-group></transition-group>包围起来，还有设定:key -->
            <transition-group name="myGroup">
                    <li class="mytable" v-for="(item,index) in list" :key="item.id" @click="del(index)">
                        {
   {item.id}}----{
   {item.name}}----{
   {item.nickname}}
                    </li>
            </transition-group>
            
        </div>
    </body>

    <script>
        Vue.http.options.root = 'http://localhost:3000/'
        var vm = new Vue({
            el:'#app',
            data() {
                return {
                    list:[],
                }
            },
            created() {
                this.$http.get('list').then(res => {
                    this.list = res.data;
                })
            },
            methods:{
                del(i){

                    this.list.splice(i,1);
                }
            },

        })
    </script>
    <style>
        .mytable {
            border: 1px dashed silver;
            line-height: 30px;
        }
        .mytable:hover {
            background-color:rgb(228, 230, 225); 
        }
        .myGroup-enter, .myGroup-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .myGroup-enter-active, .myGroup-leave-active {
            transition: all 2s ease;
        }

        /* v-move和v-leave-active实现删除一行，后面元素移位的动画效果 */
        .myGroup-move{
            transition: all 0.6s ease;
        }
        .myGroup-leave-active{
            position: absolute;
        }
    </style>
</html>

效果
在这里插入图片描述

本文链接：https://blog.csdn.net/qmz18778391913/article/details/100065724

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

NYOJ 954 N! (数学)_Strokess的博客-程序员秘密

题目链接：http://acm.nyist.net/JudgeOnline/problem.php?pid=954N!时间限制：1000 ms | 内存限制：65535 KB难度：3描述阶乘(Factorial)是一个很有意思的函数，但是不少人都比较怕它。现在这里有一个问题，给定一个N(0输入本题有多组测试数据，每组数

signature=3aa3c30d8f86a38a610970646d57426b,Cold-inducible RNA-binding protein CIRP/hnRNP A18 regulat..._weixin_39849942的博客-程序员秘密

AbstractThe telomerase is responsible for adding telomeric repeats to chromosomal ends and consists of the reverse transcriptase TERT and the RNA subunit TERC. The expression and activity of the telom...

全球及中国无人水面艇市场研究与预测报告（2022版）_立木信息咨询的博客-程序员秘密

内容简介：无人水面艇（Unmanned Surface Vessel，简称USV），是一种无人操作的水面舰艇，主要用于执行危险以及不适于有人船只执行的任务，一旦配备先进的控制系统、传感器系统、通信系统和武器系统后，可以执行多种战争和非战争军事任务，比如，侦察、搜索、探测和排雷；搜救、导航和水文地理勘察；反潜作战、反特种作战以及巡逻、打击海盗、反恐攻击等。目前，许多国家的海军正积极地开始部署无人驾驶水面航行器，开展无人水面艇研制的国家和地区主要包括美国、以色列、欧洲、日本等，但仅有美国、以色列的部分型

Android系统之Binder源代码解析_binder代码_暖阳55555的博客-程序员秘密

1. ServiceManager的启动流程system\core\roodir\init.rc：service servicemanager /system/bin/servicemanager //可知孵化器的目录为servicemanager class core user system group system critical onrestart restart healthd onrestart restart zygote onre

剑指offer---合并两个排序的链表（Java）_徒步的水獭的博客-程序员秘密

题目：输入两个递增排序的链表，合并这两个链表并使新链表中的结点仍然是按照递增排序的。思路：1.递归实现：合并过程中，每次都是从两个链表中找出较小的一个来链接，因此可以采用递归来实现，当任意一个链表为null时，直接链接另一个链表即可；其余情况只需要在两个链表中找出较小的一个结点进行链接，该结点的next值继续通过递归函数来链接。 2.非递归实现：非递归实现比较容易想到，直接进...

SpringBoot Schedule的三种使用方式_schedule用法 springboot_执余一念的博客-程序员秘密

SpringBoot Schedule的三种使用方式