Vue之Css动画

最新推荐文章于 2024-07-29 22:22:20 发布

orangeVege

最新推荐文章于 2024-07-29 22:22:20 发布

阅读量396

点赞数

分类专栏： Web前端设计文章标签： Vue之Css动画

本文链接：https://blog.csdn.net/cfyfcyf/article/details/90814337

版权

Web前端设计专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue中动画实现解析：
给实现动画效果的元素用transition包裹，这个是Css3中的过渡属性，再添加style样式,v-enter-active和v-leave-active 会在动画执行的整个过程，v-enter和v-leave为初始值，v-enter-to和v-leave-to为动画最终效果。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.v-leave-active,.v-enter-active{
				transition:opacity 3s;
			}
			.v-leave-to,.v-enter{
				opacity:0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<transition>
			<div v-if="show">CSS3</div>
			</transition>
			<button @click="clickFun">切换</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script>
			
			var app=new Vue({
				el:"#app",
				data:{
					show:true
				},
				methods:{
					clickFun(){
						this.show=!this.show
					}
				}
			});
		</script>
	</body>
</html>