Vue 动画过度效果（渐隐渐现）

最新推荐文章于 2024-09-17 22:14:30 发布

兮夏-

最新推荐文章于 2024-09-17 22:14:30 发布

阅读量1.3k

点赞数 2

本文链接：https://blog.csdn.net/m0_46693606/article/details/114010928

版权

首先一个toggle 效果：

<div id="root">
		<div v-if="show">hello world</div>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#root",
			data: {
				show: true
			},
			methods: {
				handleClick: function(){
					this.show = !this.show;
				}
			}
 
		})

如下，渐现效果，其中，因为 transition 的name 为 fade ，因此样式名为 fade-enter … 若不给transition 命名，则使用 v-enter… 即可。（transition： opacity 1s; 是指监测到opacity有变化将变化时间延长到1s）

<style>
		.fade-enter{
			opacity: 0;
		}
		.fade-enter-active{
			transition: opacity 1s;
		}
	</style>
</head>
<body>
	<div id="root">
		<transition name="fade">
			<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#root",
			data: {
				show: true
			},
			methods: {
				handleClick: function(){
					this.show = !this.show;
				}
			}
 
		})
	</script>

渐隐效果

 <style>
		.fade-enter{
			opacity: 0;
		}
		.fade-enter-active{
			transition: opacity 3s;
		}
		.fade-leave-to{
			opacity: 0;
		}
		.fade-leave-active{
			transition: opacity 3s;
		}
	</style>
</head>
<body>
	<div id="root">
		<transition name="fade">
			<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#root",
			data: {
				show: true
			},
			methods: {
				handleClick: function(){
					this.show = !this.show;
				}
			}
 
		})
	</script>