@before-enter=“beforeEnter”
@enter=“enter”
@after-enter=“afterEnter”
这是只实现入场动画 出场动画还请各位小伙伴自行搜索vue.js官方文档查阅
当点击按钮时，小球会自动移动到指定的位置，然后消失，当再次点击按钮，小球继续从原点抛出到指定位置
<!DOCTYPE html>
<html lang="zh">
<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">
<title></title>
<style>
.ball{
width: 50px;
height:50px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="快到碗里来" @click="flag=!flag" />
<!-- 1. 使用 transition 元素把 小球包裹起来 -->
<transition
@before-enter="brforeEnter"
@enter='enter'
@after-enter="afterenter">
<p class="ball" v-show="flag"></p>
</transition>
</div>
</body>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:false
},
methods:{
brforeEnter:function(el){
// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
// 设置小球开始动画之前的，起始位置
el.style.transform='translate(0,0)';
},
enter:function(el,done){
// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
// 可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth;
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform='translate(150px,450px)';
el.style.transition='all 1s ease';
// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
done();
},
afterenter:function(el){
// 动画完成之后，会调用 afterEnter
// console.log('ok')
this.flag=!this.flag;
}
}
})
</script>
</html>
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
