vue-例7-6表格中的过渡动画.html_vue 表格过渡效果-CSDN博客

本文链接：https://blog.csdn.net/modern358/article/details/129977010

该文章展示了如何利用Vue.js框架来创建一个带有过渡动画的表格。用户可以添加新的数据行，点击删除时会出现一个确认删除的过渡动画。文章通过实例详细解释了如何绑定数据、触发方法以及应用CSS样式和Vue的过渡效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格中的过渡与动画</title>
    <style type="text/css">
        #app{
            width: 600px;
            margin: 10px auto;
        }
        .tb{
            border-collapse: collapse;
            width: 100%;
        }
        .tb th{
            background-color: #ff8c00;
            width: 100%;
        }
        .tb td,
        .tb th{
            padding: 5px;
            border: 1px solid black;
            text-align: center;

        }
        .add{
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
        .del li{
            list-style: none;
            padding: 10px;
        }
        .del{
            position: absolute;
            top: 35%;
            left: 40%;
            width: 300px;
            border: 1px solid rgba(0,0,0,0.2);
            transition: all 0.5s;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="add">
            编号：<input type="text" id="id1" v-color v-focus v-model="idx">
            品牌名称：<input type="text" v-model="name">
            <button @click="add">添加</button>
        </div>
        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-if="list.length <= 0">
                    <td colspan="4">没有数据</td>
                </tr>
                <tr v-for="(item,key,index) in list" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date | dateFrm("/")}}</td>
                    <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
                </tr>
            </table>
        </div>
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave">
            <div class="del" v-show="isshow">
                <ul>
                    <li>你确定要删除数据吗？</li>
                    <li>
                        <button @click="delById">确定</button>
                        <button @click="showClose">关闭</button>
                    </li>
                </ul>
            </div>
        </transition>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        Vue.filter("dateFrm",function (time, spliceStr) {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            return year + spliceStr + month + spliceStr + day;

        });

        Vue.directive("focus",{
            inserted:function (el) {
                el.focus();
            }
        });

        Vue.directive("color",{
            inserted:function (el) {
                el.style.color = "red";
            }
        });

        let vm = new Vue({
            el:'#app',
            data:{
                delId:"",
                isshow:false,
                idx:0,
                name:'',
                list:[
                    {
                        id:1,
                        name:'学习课堂',
                        date:Date(),
                    },
                    {
                        id:2,
                        name:'其他课堂',
                        date:Date(),
                    },
                ]
            },
            methods:{
                add:function () {
                    this.list.push({"id":this.idx,"name":this.name,"date":Date()});

                },
                del:function (id) {
                    this.isshow = true;
                    this.delId = id;
                },
                beforeEnter:function (el) {
                    el.style.offsetTop = "80%";
                },
                enter:function (el, done) {
                    el.offsetHeight;
                    el.style.offsetTop = "35%";
                },
                afterEnter:function (el) {

                },
                beforeLeave:function (el) {
                    el.style.offsetTop = "35%";
                },
                leave:function (el,done) {
                    el.offsetHeight;
                    el.style.offsetTop = "80%";
                    setTimeout(function () {
                        done();
                    },500);
                },
                afterLeave:function (el) {
                    this.isshow = false;
                },
                delById:function () {
                    _this = this;
                    let index = this.list.findIndex(function (item1) {
                        return item1.id === _this.delId;
                    });
                    this.list.splice(index,1);
                    this.isshow = false;
                },
                showClose:function () {
                    //
                    this.isshow = false;
                }
            }
        })
    </script>
</body>
</html>