vue简单动画实例,学习记录

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
在下面只会有几个简单的动画实例
1、有淡入淡出效果

<template>
	<div>
		<h1>动画哈哈</h1>
		<div>
			<button @click="isShow = !isShow">toggle content</button>
			<transition>
				<div v-if="isShow">tansitions的内容</div>
			</transition>
		</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			isShow: true
		}
	}
}
</script>

<style>
/* 
v-enter 进入时的状态
v-leave-to 离开到的状态
 */
.v-enter, .v-leave-to {
	opacity: 0;
}
/* 
v-enter-to 离开到的状态
v-leave 离开时的状态
 */
 .v-enter-to, .v-leave {
	 opacity: 1;
 }
 /* 
 中间过渡
 v-enter-active 进入时的状态
 v-leave-active 离开时的状态
  */
.v-enter-active, .v-leave-active {
	transition: all 1s;
}

</style>

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线
2、下面是一个有向右移动消失效果的

<template>
	<div>
		<div>
			<button @click="isShow = !isShow">toggle content</button>
			<transition name="show">
				<div v-if="isShow">tansitionsA的内容</div>
			</transition>
		</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			isShow: true
		}
	}
}
</script>

<style>
/* 进入时的状态 */
.show-enter {
	opacity: 0;
	margin-left: 20px;
}
/* 离开到的状态 */
.show-leave-to {
	opacity: 0;
	margin-left: 30px;
}
/* 进入到的状态 */
 .show-enter-to {
	 opacity: 1;
	 margin-left: 0;
 }
/* 离开时的转台 */
 .v-leave {
	 opacity: 1;
	 margin-left: 0;
 }
 /* 进入过渡中 */
.show-enter-active {
	transition: all 1s;
}
/* 离开过渡中 */
.show-leave-active {
	transition: all 2s;
}

</style>

3、动画添加数字

<template>
	<div>
		<div>
			<button @click="addcount(1)">增加cout</button>
			<button @click="addcount(-1)">减少cout</button>
			<transition-group class="lists" name="slide" tag="ul">
				<li :key="item" v-for="item in count">{{item}}</li>
			</transition-group>
		</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			isShow: true,
			count: 10
		}
	},
	methods: {
		addcount (num) {
			this.count += 1
		}
	}
}
</script>

<style>
.lists:after {
	clear: both;
	content: '';
	display: block;
}
.lists li {
	list-style: none;
	float: left;
	border: 1px solid #ccc;
	margin: 0 5px;
	padding: 0 5px;
	position: relative;
}
/* 进入时 */
.slide-enter {
	opacity: 0;
	top: 30px;
}
/* 进入到 */
.slide-enter-to {
	opacity: 1;
	top: 0;
}
/* 中间过渡 */
.slide-enter-active {
	transition: all 2s;
}
/* 离开时 */
.slide-leave {
	opacity: 1;
	top: 0;
}
.slide-leave-to {
	opacity: 0;
	top: 30px;
}
.slide-leave-active {
	transition: all 2s;
}

</style>

4、动画翻转----翻翻翻，用到css3的动画知识

<template>
	<div>
		<div>
			<button @click="isShow = !isShow">toggle content</button>
		</div>
		<!-- 通过属性绑定自定义类名
		enter-active-class 定义进来的类名
		leave-active-class 定义出去的类名
		 -->
		<transition
		enter-active-class="box-animate"
		leave-active-class="ain-leave-active"
		>
			<div class="pro" v-if="isShow">tansitionsA的内容</div>
		</transition>
	</div>
</template>

<script>
export default {
	data () {
		return {
			isShow: true
		}
	}
}
</script>

<style>
.box-animate {
	animation: animate 3s;
}

.pro {
	position: absolute;
	z-index: 50px;
	color: #008000;
	width: 200px;
	height: 50px;
	background: #00ff80;
	line-height: 50px;
}
 /* 进入过渡中 */
.ain-enter-active {
	animation: animate 3s;
}
/* 离开过渡中 */
.ain-leave-active {
	animation: animate 3s reverse;
}
@keyframes animate {
	0% {
		left: 500px;
		transform: rotate(0);
		background: hsl(150, 95%, 49%);
	}
	100% {
		right: initial;/* 初始化 */
		left: 0;
		transform: rotate(720deg);
		background: red;
	}
}
</style>

5、这是使用vue中的钩子函数方法，写起来比较麻烦

<template>
	<div>
		<button @click="show = !show">toggle</button>
		<transition
		@before-enter="beforeEnter"
		@enter="enter"
		@befoer-leave="beforeLeave"
		@leave="Leave"
		>
			<div v-if="show">显示内容</div>
		</transition>
	</div>
</template>

<script>
export default {
	data () {
		return {
			show: true
		}
	},
	methods: {
		beforeEnter (el) {
			el.style.marginLeft='50px'
			el.style.opacity = 0
		},
		enter(el, done) {
			el.offsetWidth
			el.style.marginLeft = 0
			el.style.opacity= 1
			
			el.style.transition='all 3s ease'
			done()
		},
		beforeLeave (el) {
			
			el.style.opacity = 1
			el.style.marginLeft=0
		},
		Leave (el, done) {
			el.offsetWidth
			el.style.opacity = 0
			el.style.marginLeft ='50px'
			el.style.transition='all 3s ease'
			done()
		}
	}
}
</script>

<style>

</style>