<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="animate.min.css">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
/*自定义两组样式，来控制transition内部的元素实现动画*/
/*.v-enter,
.v-leave-to{opacity: 0;transform:translateX(150px);}
.v-enter-active,
.v-leave-active{transition: all 0.8s ease;}
.my-enter,
.my-leave-to{opacity: 0;transform:translateX(150px);}
.my-enter-active,
.my-leave-active{transition: all 0.8s ease;}*/
.ball{
width:15px;
height:15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" name="" value="快到碗里来" @click="flag=!flag">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-if="flag"></div>
</transition>
</div>
<script>
var vm = new Vue ({
el:'#app',
data:{
flag:false
},
methods: {
//动画钩子函数的第一个参数：el表示要执行动画的DOM元素，是个原生的js DOM对象
//
beforeEnter(el){
// 表示动画入场之前，动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式
el.style.transform = "translate(0,0)"
},
enter(el,done){//当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
// 这句话没有实际的作用，但是如果不写，就没有动画效果
// el.offsetWidth;el.offsetHeight;el.offsetLeft都可以
el.offsetHeight;
// 表示动画开始之后的样式，这里可以设置小球完成动画之后的，结束状态
el.style.transform = "translate(150px,450px)";
el.style.transition = "all 1s ease";
done();
},
afterEnter(el){
// 动画完成之后，会调用afterEnter
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
vue笔记之动画2-钩子函数
最新推荐文章于 2022-02-11 15:09:04 发布
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
