Vue 动画 过度效果(渐隐渐现)

首先一个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>
上一篇:css学习笔记-5


下一篇:15VUE动画-1