vue2.0的动画过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue2.4.2.js"></script>
	<style>
		.text-fade-enter-active,.text-fade-leave-active{
			transition:all .6s ease;
		}
		.text-fade-leave-active{
			opacity: 0;
			background:rgba(7,17,27,0);
		}
		.text-fade-enter,.text-fade-leave-to{
			opacity: 0;
			background:rgba(7,17,27,0);
		}
	</style>
</head>
<body>
	<div id="container">
		<transition name="text-fade">
			<div v-show="mask">
				hello world!
			</div>
		</transition>	
		<br>
		<button @click="dianwo">click</button>
	</div>
	

	<script>
		var vm = new Vue({
			el:'#container',
			data(){
				return {
					mask:false
				}
			},
			methods:{
				dianwo(){
					this.mask = true;
				}
			}
		})
	</script>
</body>
</html>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/xiaxiaoxian/article/details/79308370
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-26 16:26:04
阅读 ( 574 )
分类：前端

vue2.0的动画过渡效果

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看