vue购物车动画效果

时间：2019-10-25 11:07:32 阅读：80 评论：0 收藏：0 [点我收藏+]

使用动画的三个函数

v-on:before-enter="beforeEnter"

v-on:enter="enter"

v-on:after-enter="afterEnter"

将动画函数easy改成贝塞尔曲线的

效果：

技术分享图片

直接上代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style type="text/css">
    html,body{margin:0;padding:0}
    body{
        position:fixed;
        width:100%;
        height:100%
    }
    #app,#app>div{
        width:100%;
        height:100%
    }
    .car{
        width:100%;
        height:40px;
        line-height:30px;
        position:absolute;
        bottom:0;
        border:1px solid #ddd;
        display:flex;
        justify-content:flex-end;
    }
    .car-content{
        margin-right:30px;
        background-color:#eee;
        padding:0 8px;
        display:flex;
        align-items:center;
    }
    .compute{
        position:absolute;
        width:300px;
        text-align:center;
        height:30px;
        line-height:27px;
        top:0;
        left:0;bottom:0;right:0;
        margin:auto;
        border:1px solid #ddd
    }
    .compute span,.compute button{
        vertical-align:middle
    }
    .ball{
        position:absolute;
        top: 448px;
        left: 743px;
        width:17px;
        height:17px;
        background-color:red;
        border-radius:50%;
        z-index:999;
    }
  </style>
</head>
<body>
  <div id="app"> 
        <div>
            <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
                <div class="ball" v-if="ballFlag"></div>
            </transition>
            
            <div class="compute">
                <span>{{num}}</span>
                <button @click="add">+</button>
                <button @click="sub">-</button>
                <button @click="addToshowCar" >加入购物车</button>
            </div>
            <div class="car">
                <span class="car-content">购物车</span>
            </div>
        </div>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: ‘#app‘,
      data: function() {
            return { 
                num:0,
                ballFlag:false
            }
        },
        methods:{
            add(){
                this.num++
            },
            sub(){
                if(this.num>1){
                    this.num--
                }else{
                    return false
                }
            },
            addToshowCar(){
                this.ballFlag = !this.ballFlag
            },
            // 动画钩子函数
            // 进入前状态
            beforeEnter (el) {
                el.style.transform = ‘translate(0,0)‘
            },
            // 进入中
            enter (el, done) {
                // 需要调用元素的offset操作,才有过渡的效果,否则会马上实现过渡
                el.offsetWidth
                el.style.transform = ‘translate(569px,437px)‘
                el.style.transition = "all 2s cubic-bezier(.4,-0.3,1,.68)"
                done()
            },
            // 进入后
            afterEnter () {
                this.ballFlag = !this.ballFlag
            },
        }
    })
  </script>
</html>

vue购物车动画效果

原文：https://www.cnblogs.com/pengfei25/p/11736427.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)