Vue入门笔记Day 8

2024-01-07 16:26:16

一.vue中的css动画原理

1.过渡显示

（1）transition标签

transition表示包裹的内容会有一个动画过渡效果，动画效果必须包含在transition标签里。

（2）动画流程

transition包裹后会vue会自动分析css样式，构建一个动画流程。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的css动画原理</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.fade-enter {
				opacity: 0;
			}     /* fade-enter被移除,opacity将恢复到1 */
			/* 这个变化将在3s种内完成 */
			.fade-enter-active {
				transition: opacity 3s;
			}
			/* 对opacity进行transition监控,若opacity变化会在三秒钟从0变到opacity的值 */
			/* .v-enter{
				opacity: 0;
			}
			.v-enter-active{
				transition: opacity 3s;  
			} */
		</style>
	</head>
	<body>
		<div id="root">
			<transition name="fade">  <!-- 不屑name默认前缀为v -->
			<!-- 动画效果必须包含在transition标签里
			 transition表示包裹的内容会有一个动画过渡效果-->
			  <!-- transition包裹后会vue会自动分析css样式，构建一个动画流程 -->
				<div v-if="show">
					hello world
				</div>
			</transition>
			<button type="button" @click="handleClick">切换</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#root',
				data:{
					show:true
				},
				methods:{
					handleClick:function(){
						this.show=!this.show
					}
				}
			})
		</script>
	</body>
</html>

流程：a.动画将要执行时，fade-enter与fade-enter-active生成。
b.第二帧时，fade-enter被消除，opacity将恢复到1。
c.将会在3s内完成恢复。

2.过渡隐藏

（1）动画流程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.v-enter{
				opacity: 0;
			}
			.v-enter-active{
				transition: opacity 20s;
			}
			.v-leave-to{
				opacity: 0;
			}
			.v-leave-active{
				transition: opacity 5s;
				
			}
		</style>
	</head>
	<body>
		<div id="root">
			<transition>
				<div v-if="show">
					<!-- v-if与v-show都可以只要用transition包裹 -->
					hello world
				</div>
			</transition>
			<button type="button" @click="handleClick">切换</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#root',
				data:{
					show:true
				},
				methods:{
					handleClick:function(){
						this.show=!this.show
					}
				}
			})
		</script>
	</body>
</html>

码农公寓