之前使用的都是CSS动画,现在使用JS动画来实现点击出现Hello World,再点击消失的动画
下面是基础代码:
先把change点击一下,让Hello World消失
再点击一下,发现beforeEnter会出来,也就是说当元素从隐藏到显示的时候,即将显示的那一瞬间,beforeEnter就会执行
实际上before-enter还可以传入一个值,这个值指的是transiton所包裹的元素
接下来我们再看一下第二个动画钩子
before-enter是动画的触发,触发开始之后的enter就是正真的运行动画了
当我们动画代码写完的时候,记得要去把done这个回调函数调用一下,用来说明你动画到这里就运行完了
这个时候当done之后又会有个动画钩子会运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="vm">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<div v-if="show">Hello World</div>
</transition>
<button @click="handleClick" type="button">change</button>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
},
handleBeforeEnter: function(el) {
el.style.color = 'red';
},
handleEnter: function(el, done) {
setTimeout(() => {
el.style.color = 'green';
done();
},2000)
},
handleAfterEnter: function(el) {
el.style.color = 'black';
}
}
});
</script>
</body>
</html>
除了入场动画有这三个钩子之外,出场动画也有三个钩子
用法和enter一致
-----------------------------------------------------------------------------------------------------------------
下面将一下Velocity的基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="velocity.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="vm">
<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
name="fade">
<div v-if="show">Hello World</div>
</transition>
<button @click="handleClick" type="button">change</button>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
},
handleBeforeEnter: function(el) {
el.style.opacity = 0;
},
handleEnter: function(el, done) {
Velocity(el, {opacity: 1}, {duration: 1000, complete: done});
},
handleAfterEnter: function(el) {
el.style.color = 'black';
}
}
});
</script>
</body>
</html>
<script src="velocity.js" type="text/javascript" charset="utf-8"></script>
Velocity(el, {opacity: 1}, {duration: 1000, complete: done});
这样就会一个渐出的效果