zoukankan      html  css  js  c++  java
  • Vue(十四)过渡(动画)

    过渡(动画)
    1. 简介
    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果
    本质上还是使用CSS3动画:transition、animation
    2. 基本用法
    使用transition组件,将要执行动画的元素包含在该组件内
    <transition>
    运动的元素
    </transition>
    过滤的CSS类名:6个
     
    3. 钩子函数
    8个
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>vue</title>
    	<script src="https://unpkg.com/vue"></script>
    	<style>
    		
    		p{
    			 300px;
    			height: 300px;
    			background-color:red;
    		}
    		.fade-enter-active,.fade-leave-active{
    			transition:all 3s ease;
    		}
    		.fade-enter-active{
    			opacity:1;
    			300px;
    			height:300px;
    		}
    		.fade-leave-active{
    			opacity:0;
    			50px;
    			height:50px;
    		}
    		/* .fade-enter需要放在.fade-enter-active的后面 */
    		.fade-enter{
    			opacity:0;
    			 100px;
    			height: 100px;
    		}
    
    	</style>
    
    </head>
    
    <body>
    
    	<div id="itany">
    		<button @click="flag=!flag">点我</button>
    		
    		<transition name="fade" 
    			@before-enter="beforeEnter"
    			@enter="enter"
    			@after-enter="afterEnter"
    			@before-leave="beforeLeave"
    			@leave="leave"
    			@after-leave="afterLeave"
    		>
    			<p v-show="flag">网博</p>
    		</transition>
    	</div>
    
    	<script>
    		var vm=new Vue({
    			el:'#itany',
    			data:{
    				flag:false
    			},
    			methods:{
    				beforeEnter(el){
    					// alert('动画进入之前');
    				},
    				enter(){
    					// alert('动画进入');
    				},
    				afterEnter(el){
    					// alert('动画进入之后');
    					el.style.background='blue';
    				},
    				beforeLeave(){
    					// alert('动画即将之前');
    				},
    				leave(){
    					// alert('动画离开');
    				},
    				afterLeave(el){
    					// alert('动画离开之后');
    					el.style.background='red';
    				}
    			}
    		});
    	</script>
    	
    </body>
    
    </html>
    

      

    4. 结合第三方动画库animate..css一起使用(https://daneden.github.io/animate.css/)
    <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
      <p v-show="flag">网博</p>
    </transition>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>vue</title>
    	<link rel="stylesheet" href="css/animate.css">
    	<script src="https://unpkg.com/vue"></script>
    	<script>
    
    		window.onload = function(){
    
    			var vm = new Vue({
    				el:'#app',
    				data:{
    					flag:false
    				}
    			})
    
    		}
    
    	</script>
    
    	<style>
    		p{
    			 300px;
    			height: 300px;
    			background-color: red;
    			margin:0 auto;
    		}
    	</style>
    
    </head>
    
    <body>
    
        <div id="app">
    		<button @click="flag=!flag">点我</button>
    	
    		<transition enter-active-class="animated rollIn" leave-active-class="animated rollOut">
    			<p v-show="flag">网博</p>
    		</transition>
        </div>
    
    </body>
    
    </html>
    

      

     
    5. 多元素动画
    <transition-group>

      

    		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutLeft">
    			<p v-show="flag" :key="1">你好</p>
    			<p v-show="flag" :key="2">世界</p>
    		</transition-group>
    

      

      

    6. 练习
    多元素动画
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>vue</title>
    	<link rel="stylesheet" href="css/animate.css">
    	<script src="https://unpkg.com/vue"></script>
    	<script>
    
    		window.onload = function(){
    
    			var vm = new Vue({
    				el:'#app',
    				data:{
    					flag:true,
    					arr:['tom','jack','mike','alice','alex','mark'],
    					name:''
    				},
    				/* 计算属性 */
    				computed:{
    					arr2:function(){
    						var temp=[];
    						this.arr.forEach(val => {
    							if(val.includes(this.name)){
    								temp.push(val);
    							}
    						});
    						return temp;
    					}
    				}
    			})
    
    		}
    
    	</script>
    
    	<style>
    		p{
    			 50px;
    			height: 50px;
    			background-color: red;
    			margin:0 auto;
    		}
    	</style>
    
    </head>
    
    <body>
    
        <div id="app">
    		<input type="text" v-model="name">
    		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
    				<p v-for="(v,k) in arr2" :key="k">
    					{{v}}
    				</p>
    		</transition-group>
        </div>
    
    </body>
    
    </html>
    

      

     
     
     
  • 相关阅读:
    494. Target Sum 添加标点符号求和
    636. Exclusive Time of Functions 进程的执行时间
    714. Best Time to Buy and Sell Stock with Transaction Fee有交易费的买卖股票
    377. Combination Sum IV 返回符合目标和的组数
    325. Maximum Size Subarray Sum Equals k 和等于k的最长子数组
    275. H-Index II 递增排序后的论文引用量
    274. H-Index论文引用量
    RabbitMQ学习之HelloWorld(1)
    java之struts2的数据处理
    java之struts2的action的创建方式
  • 原文地址:https://www.cnblogs.com/yulingjia/p/8303637.html
Copyright © 2011-2022 走看看