下面来个半场动画的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue动画</title>
<script src="./lib/vue.2.6.6.js"></script>
<style>
#grou {
background-color: #F00;
width: 15px;
height: 15px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<button @click="flag = ! flag">点我</button>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div id="grou" v-if="flag"></div>
</transition>
</div>
</body>
<script>
var myapp = new Vue({
el: "#app",
data: {
flag: false,
},
methods: {
//vue动画钩子函数的第一个参数el表示要执行动画的DOM元素
beforeEnter(el) {//动画入场之前,可以在这里设置元素动画入场之前的样式
el.style.transform = "translate(0,0)"
},
enter(el, done) {//动画入场,这里的done就是 afterEnter 动画完成之后立即调用afterEnter,官网是这么解释的:(当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。)
el.offsetWidth //这句话貌似没什么用,但是不写没有动画效果
el.style.transform = "translate(150px,200px)"
el.style.transition = "all 1s ease"
done()
},
afterEnter(el) {//动画入场之后
//动画结束之后元素消失
this.flag = !this.flag
}
},
})
</script>
</html>