vue的JavaScript 钩子：模拟加入购物车动画小demo（半场动画）

最新推荐文章于 2023-06-15 13:50:18 发布

MajorMe

最新推荐文章于 2023-06-15 13:50:18 发布

阅读量275

点赞数

分类专栏： vue 文章标签： vue JavaScript钩子函数 vue半场动画

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

版权

vue 专栏收录该内容

13 篇文章 4 订阅

订阅专栏

Vue官方文档参考详情

代码：

<!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>
        <!-- 不懂为啥，ivew.css下载到本地使用icon不显示 -->
        <!-- <link rel="stylesheet" href="./lib/iview.css"> -->
        <link rel="stylesheet" href="https://unpkg.com/iview@3.4.2/dist/styles/iview.css">
    </head>
    <body>
        <div id="app">
           <div class="store">
               <p class="cql">陈情令商铺</p>
               <div class="goodsBox">
                   <div class="itemBox">
                        <div class="goodItem">
                            <label class="goodName">魏无羡</label>
                            <img src="./images/wwx1.jpg" class="good"/>
                            <label class="addButton" @click="flag=!flag">加入购物车</label>
                        </div>
                        <!-- 半场动画，包括js的三个钩子函数：before-enter、enter、after-enter -->
                        <transition
                        @before-enter="beforeEnter"
                        @enter="enter"
                        @after-enter="afterEnter">
                            <div v-show="flag" class="miniBall"></div>
                        </transition>
                   </div>
                    
                   <div class="itemBox">
                        <div class="goodItem">
                            <label class="goodName">蓝忘机</label>
                            <img src="./images/lwj1.jpg" class="good"/>
                            <label class="addButton" @click="flag1=!flag1">加入购物车</label>
                        </div>
                        <transition
                        @before-enter="beforeEnter"
                        @enter="enter"
                        @after-enter="afterEnter">
                            <div v-show="flag1" class="miniBall"></div>
                        </transition>
                   </div>
                    
                    <!-- 购物车 -->
                    <label class="goodCar">
                            <Icon size="30" type="ios-cart-outline" ></Icon>
                    </label>
               </div>
           </div>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    flag:false,
                    flag1:false,
                }
            },
            methods:{
                // el表示transition标签包围起来的那个DOM元素，是个原生的 JS DOM对象
                beforeEnter(el) {
                    // 1.结束点
                    el.style.transform = "translate(50px, 0)";
                },
                enter(el, done) {
                    // 2.需要加上这句才会刷新，执行过渡期间的效果
                    el.offsetWidth 

                    // 3.结束点
                    if(this.flag) {
                        // 向右移动260px，向下移动230px
                        el.style.transform = "translate(260px, 230px)";
                    }
                    if(this.flag1) {
                        el.style.transform = "translate(150px, 230px)";
                    }
                    el.style.transition = "all 2s ease";

                    // 4.动画结束后，隐藏（done代表afterEnter函数）
                    done()
                },
                afterEnter(el) {
                    if(this.flag) {
                        this.flag = !this.flag;
                    }
                    if(this.flag1) {
                        this.flag1 = !this.flag1;
                    }
                },
            }
        })
    </script>
    <style>
        .store{
            width: 300px;
            height: 500px;
            border: 1px solid #333;
            margin-left: 20px;
        }
        .cql{
            text-align: center;
            font-size:18px;
            margin: 10px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #333;
        }
        .goodsBox{
            height: 88%;
            position: relative;
            padding: 10px;
        }
        .itemBox{
            margin-right: 10px;
            display: inline-block;
        }
        .goodItem{
            width: 96px;
            display: inline-block;
        }
        .good{
            border: 1px solid #ddd;
            width: 94px;
            display: block;
            margin-bottom: 5px;
        }
        .goodName{
            font-weight: bold;
            display: block;
            text-align: center;
        }
        .addButton{
            border:1px solid silver;
            border-radius:4px;
            margin-left: 14px;
            padding: 2px 3px;
        }
        .addButton:hover{
            cursor: pointer;
            border:1px solid #666;
        }
        .miniBall{
            display: inline-block;
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: red;
            border:1px solid red; 
            border-radius: 50%;
        }
        .goodCar{
            display: inline-block;
            position: absolute;
            bottom: 0;
            right: 10px;
        }
        .ivu-btn-ghost {
            color: #3d3030;
            background: 0 0;
        }
    </style>
</html>

效果：
在这里插入图片描述

MajorMe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的JavaScript 钩子：模拟加入购物车动画小demo（半场动画）

Vue官方文档参考详情代码：<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> ...
复制链接

扫一扫