vue animation configuration Functions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
       .ball{
           width: 15px;
           height: 15px;
           border-radius: 50%;
           background-color: red;
       }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">
        <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
        <!--<transition
            Before before-enter = "beforeEnter" animation starts, the starting position: V ON- 
            v-on: Enter = "Enter" animation into the 
            v-on: after the after-enter = "afterEnter" animation into the 
            v-on: enter-cancelled = "enterCancelled" how to enter the cancellation did not use the 

            v-ON: the before-the Leave = "beforeLeave" 
            v-ON: the Leave = "the Leave" 
            v-ON: the After-the Leave = "afterLeave" 
            v-ON: the Leave-canceled = " leaveCancelled "> 
        </ Transition> -> 
    </ div> 
    <Script> 

        var Vue new new VM = ({ 
            EL:" App # ", 
            Data: { 
                In Flag: to false 
            }, 
            Methods:{
                beforeEnter(el){
                    = el.style.transform "Translate (0,0)" 
                }, 
                Enter (EL, DONE) { 
                    el.offsetWidth // mandatory refresh animation path 
                    el.style.transform = "Translate (by 150px, 450px)" 
                    el.style = .transition "All lS EASE" 
                    DONE () // function is a reference afterEnter 
                }, 
                afterEnter (EL) { 
                    this.flag =! this.flag 
                    the console.log ( "OK") 
                } 
            } 
        }) 
    </ Script> 
< / body> 
</ HTML>
vue animation configuration Functions

Guess you like
