<body>
<div id="app">
<input type="button" value="Add to Cart" @click="flag=!flag">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<!-- 这里 @after-enter="afterEnter" 后面不要加括号。
不加括号，表示直接调用这个方法。
加括号 表示调用 方法的完成之后的取值。 -->
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag: false, // 这里是布尔值，不是字符串，不要加引号。
},
methods: {
beforeEnter(el){
// el.style.transition = transform(0, 0);
el.style.transform = 'translate(0, 0)'
},
enter(el, done){
el.offsetWidth;
// el.style.transition = transform(100, 450);
// el.style.opacity = 0;
el.style.transform = 'translate(150px, 450px)';
el.style.transition = 'all 1s ease';
done();
},
afterEnter(el){
this.flag =! this.flag;
},
},
});
</script>
</body>