vue——31-动画-使用钩子函数实现动画（添加购物车之类的半场动画可用此）

钩子函数动画

开始动画的设置含义（同结束动画）

v-on: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"
>
     ...
</transition>

实例：

css

 .ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: red;
            margin-top: 20px;
        }

body

<div id="app">
    <input type="button" value="快到碗里来" @click="flag=!flag">
    <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
    >
        <div class="ball" v-if="flag"></div>
    </transition>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                // 注意：动画钩子函数的第一个参数：el，表示
                // 要执行动画的那个DOM元素，是个原生的 JS DOM 对象
                // 可以认为，el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
                beforeEnter(el) {
                    // 表示动画入场之前，此时动画还未开始，可以在其中
                    // 设置元素开始动画之前的起始样式
                    // 设置小球开始动画之前的起始位置
                    el.style.transform = 'translate(0,0)';
                },
                enter(el,done) {
                    //没有实际效果，但不可缺少，可以理解为强制动画刷新
                    el.offsetWidth;//offsetHeight、offsetLeft等都可以
                    //表示动画，开始之后的样式，可以设置小球完成动画的结束状态
                    el.style.transform = 'translate(150px,500px)';
                    el.style.transition = 'all 1s ease';

                    // 这里的 done，其实就是 afterEnter 这个函数，
                    // 也就是说：done 是 afterEnter 函数的引用
                    done();
                },
                afterEnter(el) {
                    //表示动画完成之后小球的状态

				    // 使用 flag 标识符，来表示动画的切换；
				    // Vue 把一个完整的动画，使用钩子函数，拆分为了两部分；
				    // 对flag：第一部分 false -> true ;  第二部分 true -> false
				    
				    // 这句话，第一个功能，是控制小球的显示与隐藏
				    // 第二个功能：直接跳过后半场动画，让 flag 标识符直接变为 false
				    // 当第二次再点击按钮的时候，flag = false -> true
                    this.flag = !this.flag;
                }
            }
        });
    }
</script>

vue——31-动画-使用钩子函数实现动画（添加购物车之类的半场动画可用此）

钩子函数动画

猜你喜欢