模拟加入购物车的特效（Vue）

最新推荐文章于 2024-05-21 11:37:12 发布

wj_秦桑低绿枝

最新推荐文章于 2024-05-21 11:37:12 发布

阅读量1.6k

点赞数

文章标签： Vue 动画加入购物车

本文链接：https://blog.csdn.net/qinsangdilvzhi/article/details/89380045

版权

在这里插入图片描述
点击加入购物车，会弹出一个紫色小球掉入购物车

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="Vue.min.js"></script>

  <style>
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: blueviolet;
    }

    p {
      position: absolute;
      top: 455px;
      left: 100px;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="加入购物车" @click="flag=!flag">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
    <p>假装这里有一个购物车</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        beforeEnter(el) {
          el.style.transform = "translate(0,0)" //小球初始位置
        },
        enter(el, done) {
          el.offsetWidth //动画过渡
          el.style.transform = "translate(150px,450px)" //最终位置
          el.style.transition = 'all 2s ease' //所花时间
          done()
        },
        afterEnter(el) {
          this.flag = !this.flag
        }

      }
    })
  </script>

</body>

</html>

wj_秦桑低绿枝

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
模拟加入购物车的特效（Vue）

点击加入购物车，会弹出一个紫色小球掉入购物车<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"...
复制链接

扫一扫