点餐-加入购物车后小球动画

最新推荐文章于 2024-01-12 18:25:08 发布

原创最新推荐文章于 2024-01-12 18:25:08 发布 · 389 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

学习日常

vue

本文详细介绍使用Vue.js实现小球动画的过程，包括动画钩子函数的运用，如beforeEnter、enter和afterEnter，以及如何通过点击按钮控制动画的显示与隐藏。通过实例代码展示了如何设置小球的初始位置、动画效果和过渡时间。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>小球动画</title>
 <script src="js/vue-2.4.0.js"></script>
 <style>
  .ball{
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: red;
  }
  /*.v-enter-active{
   animation-duration:500ms;
   animation-delay: 0ms;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
   transform-origin: 0 0;
  }
  .v-leave{
   opacity: 0;
  }*/
 </style>
</head>
<body>
 <div id="app">
        <button @click="flag=!flag">加入购物车</button>
        <!--给transition绑定动画enter钩子事件-->
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
 <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {
                //动画钩子函数
                //注意:动画钩子函数的第一个参数el,表示要执行动画的那个dom元素，是个原生dom元素
                beforeEnter(el) {
                //    表示动画入场之前，此时，动画尚未开始，可以在beforeEnterz中设置元素开始动画之前的启示样式
                    el.style.transform = "translate(0,0)"
                //    设置小球开始动画之前的起始位置
                },
                enter(el,done) {
                    //此处的done代表下一个钩子函数，在调用done之后会直接调用afterEnter函数（），不调用小球会延迟消失
                    //必须加上才有动画。黑魔法
                    el.offsetLeft;//或者时offsetWidth||offsetHeight||offsetRight
                //enter 表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
                    el.style.transform = "translate(150px,450px)";
                    el.style.transition = "all 1s ease";
                    done()
                },
                afterEnter(el) {
                    //在执行完成之后小球会等一会消失
                    this.flag = !this.flag;
                }
            }
        })
    </script>
</body>
</html>