过渡

类名

在这里插入图片描述

样式定义：

在这里插入图片描述

使用方法

在这里插入图片描述

事件

在这里插入图片描述

例子，小球购物车

在这里插入图片描述

51行：隐藏小球

<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>
--------------------- 
作者：肖ZE 
来源：CSDN 
原文：https://blog.csdn.net/lucky541788/article/details/83051324 
版权声明：本文为博主原创文章，转载请附上博文链接！

在这里插入图片描述