Vue.js框架基础学习五



5-5Vue中多个元素或则组件的过渡
 
  多个Dom时候，动画切换避免复用之前的DOM,这里要加入key值
  mode=“in-out”,先进入后隐藏，out-in先隐藏后进入

<head>
		<meta charset="UTF-8">
		<title>Vue中多个元素的过渡</title>
		<script type="text/javascript" src="../vue.js" ></script>
		<link rel="stylesheet" href="../animate.css" />
		<style>
			.fade-enter,.fade-leave-to{
				opacity: 0;
			}
			.fade-enter-active,.fade-leave-active{
				transition:opacity 1s;
			}
		</style>
	</head>
	
	
<body>
  <div id="root">
  	<transition 
  		name="fade"  mode="in-out">	
  	<div v-if="show" key="hello">helloword</div>
  	<div v-else key="bye">Bye World</div>
  	</transition>
  	<button @click="handleClick">toggle</button>
  	
  </div>
  <script>
  	var vm=new Vue({
  		el:"#root",
  		data:{
  			show:true
  		},
  		methods:{
  			handleClick:function(){
  				this.show= !this.show
  			},
  			
  		}
  	})
  </script>


Vue中多个组件的过渡
   加入动态组件 <component :is="type"></component>来简化子组件并列排布。
   
  <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue中多个元素,组件的过渡</title>
		<script type="text/javascript" src="../vue.js" ></script>
		<link rel="stylesheet" href="../animate.css" />
		<style>
			.fade-enter,.fade-leave-to{
				opacity: 0;
			}
			.fade-enter-active,.fade-leave-active{
				transition:opacity 1s;
			}
		</style>
	</head>
	
	
<body>
  <div id="root">
  	<transition 
  		name="fade"  mode="out-in">	
  		<component :is=type></component>
  	<!--<child v-if="show"></child><father v-else></father>
  		data:{
  			show:true
  		}
  		methods:{
  			handleClick:function(){
  				this.show= !this.show
  			},
  			
  		}
  	-->
  	
  	</transition>
  	<button @click="handleClick">toggle</button>
  	
  </div>
  <script>
    Vue.component("child",{
    	template:'<div>I am Son</div>'
    })
    Vue.component("father",{
    	template:'<div>I am Father</div>'
    })
  	var vm=new Vue({
  		el:"#root",
  		data:{
  			type:'child'
  		},
  		methods:{
  			handleClick:function(){
  				this.type=this.type==='child'?'father':'child'
  			},
  			
  		}
  	})
  </script>
</body>
</html>


5-6Vue中的多个列表过渡：<transition-group></transition-group>相当于为每一次添加的<div></div>包装

上<transition><div></div></transition>调用下面<style></style>

	
	<style>
		.v-enter,.v-leave-to{
				opacity: 0;
		}
		.v-enter-active,.v-leave-active{
			transition:opacity 1s;
			}
		</style>
	</head>
	
	
<body>
  <div id="root">
  	<transition-group>
    <div v-for="item of list " :key="item.id">
    	{{item.title}}
    </div>
    </transition-group>
  	<button @click="handleClick">Add</button>
  	
  </div>
  <script>
    var count=0;
  	var vm=new Vue({ 
  		el:"#root",
  		data:{
  			list:[]
  		},
  		methods:{
  			handleClick:function(){
  				this.list.push({
  					id:count++,
  					title:'hello world'
  				})
  			}
  		}
  	})
  </script>


5-7Vue的动画封装

封装一：建立封装组件如：‘fade’

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue中多个元素,组件的过渡</title>
		<script type="text/javascript" src="../vue.js" ></script>
		<link rel="stylesheet" href="../animate.css" />
		
	<style>
		.v-enter,.v-leave-to{
				opacity: 0;
		}
		.v-enter-active,.v-leave-active{
			transition:opacity 1s;
			}
		</style>
	</head>
	
	
<body>
  <div id="root">
  	<fade :show="show">
    <div v-if="show">hello world
    	
    </div>
    </fade>
    <fade :show="show">
    <h1 v-if="show">Tom
    	
    </h1>
    </fade>
  	<button @click="handleClick">点击</button>
  	
  </div>
  <script>
   //封装
   Vue.component('fade',{
   	props:['show'],
   	template:'<transition><slot v-if="show"></slot></transition>'
   })
  	var vm=new Vue({ 
  		el:"#root",
  		data:{
  			show:true
  		},
  		methods:{
  			handleClick:function(){
  				this.show=!this.show
  			}
  		}
  	})
  </script>
</body>
</html>

封装2：这里出现了一个错误，setTimeout()显示错误，不要在本地运行，在服务器运行OK   
可以修饰的CSS代码也给封装到下面函数中。
	
	
<body>
  <div id="root">
  	
      <fade :show="show">
  	  <div>hello</div>
      </fade>
      <fade :show="show">
  	  <h1>hello</h1>
      </fade>
  	<button @click="handleClick">toggle</button>
  	
  </div>
  <script>
    Vue.component('fade',{
    	props:['show'],
    	template:'<transition @before-enter="handle" @enter="handle2"><slot v-if="show"></slot></transition>',
    	methods:{
    		handle:function(el){
    			el.style.color='red'
    		},
    		handle2:function(el,done){
    			setTimeout(() =>{
    				el.style.color='green'
    				done()
    				
    			},2000)
    		}
    	}
    })
  	var vm=new Vue({
  		el:"#root",
  		data:{
  			show:false
  		},
  		methods:{
  			handleClick:function(){
  				this.show=!this.show
  			},
  			
  		}
  	})
  </script>
</body>
</html>
Vue.js框架基础学习五

猜你喜欢
