<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.ball{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div id="myApp">
<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-if="flag"></div>
</transition>
</div>
</body>
<script>
var myApp = new Vue({
el: "#myApp",
data: {
flag: false
},
methods: {
//第一个参数表示要执行动画的DOM元素
beforeEnter: function(el){
//表示动画入场之前，此时动画尚未开始。可以在此设置起始样式
el.style.transform = "translate(0,0)";
},
enter: function(el,done){ //这里的done就是afterEnter这个函数，也就是说，done是afterEnter函数的引用。
el.offsetWidth; //这句话没有实际的作用，如果不写出不来动画效果
//表示动画开始之后的样式，这里可以设置完成之后的结束状态
el.style.transform = "translate(150px,450px)";
el.style.transition = "all 1s ease";
done(); //动画完成之后，立即隐藏
},
afterEnter: function(el){
//动画完成之后
this.flag = !this.flag;
}
}
});
</script>
</html>
<!-- <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> -->
Vue模拟小球半场动画
最新推荐文章于 2021-06-19 22:47:12 发布
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
