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<