Vue中的JS动画与Velocity.js的结合

之前使用的都是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>

Velocity(el, {opacity: 1}, {duration: 1000, complete: done});

这样就会一个渐出的效果

Vue中的JS动画与Velocity.js的结合

猜你喜欢