Vue中过渡与动画的案例

最新推荐文章于 2022-11-03 09:43:23 发布

.你别皱眉

最新推荐文章于 2022-11-03 09:43:23 发布

阅读量484

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/qq_45938852/article/details/112435017

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background: #ff8c00;
            color: white;
        }

        .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: 55%;
            left: 40%;
            width: 300px;
            border: 1px solid rgba(0, 0, 0, 0.9);
            transition: all 0.5s;
            background: rgba(0, 0, 0, 0.2);
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            编号: <input type="text" id="id" v-color v-focus v-model="id">
            品牌名称: <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>

                <!-- 加入key="index"时候必须把所有参数写完整 -->
                <tr v-for="(item, index) in list" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date | dateFrm("-")}}</td>
                    <td><a href="javascripe: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>
                    <button @click="delById">确定</button>
                    <button @click="showClose">关闭</button>
                </ul>
            </div>
        </transition>
    </div>

    <script>
        /*
        *使用过滤函数获取年月日 并过滤转化为正常的日期格式
        */
        Vue.filter("dateFrm", function (time, spliceStr) {
            //return 2020-1-10
            let date = new Date(time);
            //获取年份
            let year = date.getFullYear();
            //获取月份
            let month = date.getMonth() + 1;
            //获取日数
            let day = date.getDay();
            return year + spliceStr + month + spliceStr + day;
        });

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

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

        const app = new Vue({
            el: '#app',
            data: {
                //对将要删除数据的id进行保存
                delId: '',
                //isshow删除框
                isshow: false,
                id: 0,
                name: '',
                list: [
                    { id: 1, name: "云课堂", date: Date() },
                    { id: 2, name: "课堂网站", date: Date() },
                ]
            },
            methods: {
                add(id, name) {
                    if (this.id == "") {
                        alert("请填写编号");
                    } else if (this.name == "") {
                        alert("请填写品牌名称");
                    } else {
                        //id不可以重复
                        if (this.id > this.list.length) {
                            //添加新的数据  Date是系统时间  不需要this指针
                            this.list.push({ "id": this.id, "name": this.name, "date": Date() });
                        } else {
                            alert("Id长度错误")
                        }
                    }
                },
                del(id) {
                    //点击删除的时候 显示删除框
                    this.isshow = true;
                    //将得到的id保存到delId中
                    this.delId = id;
                },
                /*
                *使用钩子函数实现过渡和动画  
                *显示删除框的位置及动画效果
                */
                /*进入时的动画*/
                beforeEnter(el) {
                    el.style.offsetTop = "90%"
                },
                enter(el, done) {
                    //offsetHeight / offsetWidht 没有实际意义，但是不添加没有过渡动画效果
                    el.offsetHeight;
                    el.style.offsetTop = "35%";
                },
                afterEnter(el) {
                    //........需要用到某些功能在写业务逻辑
                },
                beforeLeave(el) {
                    el.style.offsetTop = "35%"
                },

                /*离开时的动画*/
                leave(el, done) {
                    el.offsetHeight;
                    el.style.offsetTop = "80%";
                    //加上时间函数  不然done()方法调用不了
                    setTimeout(
                        function () {
                            done();
                        }
                    )
                },
                afterLeave(el) {
                    //........需要用到某些功能在写业务逻辑
                },
                showClose(el) {
                    this.isshow = false;
                },

                delById() {
                    _this = this;
                    //根据DelId删除对应的数据
                    let index = this.list.findIndex(
                        function (item) {
                            return item.id == _this.delId;
                        }
                    );
                    //splice()数组方法
                    this.list.splice(index, 1)
                    //关闭删除框
                    this.isshow = false;
                }
            }
        })
    </script>
</body>

</html>

上述代码，表格的过渡与动画中定义过滤器dateFrm，自定义focus，color，v-if，v-show指令以及事件处理机制，使用了一些钩子函数来实现过渡与动画

.你别皱眉

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中过渡与动画的案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #app {
复制链接

扫一扫