Vue动画-使用钩子函数实现半场动画(添加购物车之类的半场动画可用)

动画钩子函数

v-on:before-enter:表示动画入场之前，此时，动画尚未开始，可以在 before-enter中，设置元素。开始动画之前的其实样式。
v-on:enter:表示动画，开始之后的样式，可以设置完成动画的结束状态
v-on:after-enter:表示动画完成后的状态
v-on:enter-cancelled:用于取消开始动画

添加购物车半场动画例子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>

例子：

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

<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="../lib/vue.js"></script>
</head>
<style>
    .ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
}
</style>

<body>
    <div id="app">
        <input type="button" value="加入" @click="flag=!flag">

        <transition v-on:before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-show="flag" class="ball"></div>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                // 注意:动画钩子函数的第一个参数：el ，表示 要执行动画的那个DOM元素
                // 是个原生的 JS DOM对象。（大家可以认为，el 是通过 document.getElementById('') 方式获取得到的原生JS DOM对象）

                beforeEnter: function (el) {
                    // before-enter 表示动画入场之前，此时，动画尚未开始，可以在 before-enter中，设置元素
                    // 开始动画之前的起始样式

                    // 设置小球开始动画之前的 起始位置
                    el.style.transform = "translate(0,0)"
                },
                enter: function (el, done) {
                    // 下边这句话没有实际的作用，但是如果不写，出不来动画效果
                    // 可以认为 el.offsetWidth 会强制动画刷新(有width 就有height、left，只要跟offset有关都可以)
                    el.offsetWidth;
                    // enter 表示动画，开始之后的样式，这里可以设置小球完成动画之后的结束状态
                    el.style.transform = "translate(150px,350px)";
                    el.style.transition = "all 1s ease";

                    // 这里的done 其实就是 after-enter函数，也就是说：done 是 after-enter函数的引用（回调相当于引用执行after-enter函数）
                    done()
                },
                afterEnter(el) {
                    // 动画完成之后，会调用的 after-enter 函数
                    this.flag = !this.flag; //做完，动画没有立即消失，如果立即消失，必须在enter函数中，加done参数
                }
            }
        })
    </script>
</body>

</html>

Vue动画-使用钩子函数实现半场动画(添加购物车之类的半场动画可用)

动画钩子函数

添加购物车半场动画例子

猜你喜欢