Vue 第五章钩子函数实现半场动画

1、钩子函数实现半场动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn镜像快速导入Vue包-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <style>
        .ball{
             15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="加入购物车" @click="flag=!flag">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div class="ball" v-show="flag"></div>
    </transition>
</div>
<script>
    //2.创建一个vue实例
    var vm = new Vue({
        el: '#app',    //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            flag:false,
            msg: '欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序
        },
        methods:{
            //el表示要执行动画的Dom元素，beforeEnter表示动画起始位置
            beforeEnter(el){
                el.style.transform = "translate(0,0)"
            },
            //enter表示动画之后的样式，这个可以设置小球完成动画的结束状态
            enter(el,done){
                el.offsetWidth
                el.style.transform ="translate(150px,450px)"
                el.style.transition= 'all 1s ease'
                //done()让动画立即消失。这个done就是afterEnter函数的引用
                done()
            },
            //动画完成之后
            afterEnter(el){
               // this.flag = !this.flag
            }
        }
    })
</script>
</body>
</html>
Vue 第五章 钩子函数实现半场动画

Vue 第五章钩子函数实现半场动画
