动画效果

<template>
<!-- 动画 -->      
  <div>            
   	<input type="button" value="toggle" @click="flag=!flag">
    <!-- 动画 transition 把需要被动画控制的元素，包裹起来vue官方提供的 -->            		
    	<transition >            
         	<h3 v-if="flag">这是一个h3</h3>
	</transition >        
 </div>     
 <div>     
    <!-- 使用动画钩子函数模拟小球半场动画 --> 
       <input type="button" value="快到碗里来" @click="flag1=!flag1">            	
       	<transition              
         @before-enter="beforeEnter"              
         @enter="enter"            
         @after-enter="afterEnter">              
         	<div class="ball" v-if="flag1"></div>         
         </transition>        
  </div>        
 <div>             
 	<div>              
  		<label for="">                     
  		Id:               
   		<input type="text" v-model="id1">            
                </label>             
                <label for="">                     
                Name:                     
                <input type="text" v-model="name1">                 	
                </label>                 
                <input type="button" value="添加" @click="add1">             
        </div>                         
        <!-- <ul> -->               
         <!-- 在实现列表过渡的时候，如果需要过渡的元素，                
         是通过v-for循环渲染出来的不能使用transition包裹，要使用transition-group -->               
          <!-- 如果要为v-for循环创建的元素设置动画，必须为每一个元素设置：key属性 -->               
           <!-- 给transition-group添加啊appear属性，实现入场的效果 -->                <!-- 通过为transition-group设置tag属性，指定transition-group渲染为什么指定的元如果不指定，默认渲染为span标签 -->                
           <transition-group name="my" appear tag="ul">                    
           	<li v-for="(item,i) in list1" :key="item.id" @click="del1(i)">                        
           		{{item.id}}---{{item.name}}                    
           	</li>                
           </transition-group>           
            <!-- </ul> -->                     
        </div>
   </template>
   <script>
   	export default{    
	   	data(){        
		   	return{            
		   	id1:"",            
		   	name1:"",            
		   	list1:[                
		   	{id:1,name:"赵"},                
		   	{id:2,name:"钱"},                
		   	{id:3,name:"孙"},               
		    	{id:4,name:"李"},],            
		    	flag1:false,            
		    	flag:false,}
	  methods:{
	  	del1(i){            
	  	this.list1.splice(i,1); },        
	        add1(){            
	        this.list1.push({id:this.id1,name:this.name1})            
	        this.id1=this.name1="" },    
	        //注意，动画钩子函数的第一个参数：el，表示，要执行动画的那个DOM元素，是那个原生的JS DOM对象    
	        //大家可以认为，el是通过document.getelementById1('')方式获取到的原生JS DOM对象         
	        beforeEnter(el){            
	         // 表示动画入场之前，此时，动画尚未开始，            
	         // 可以在beforeEnter中，设置元素开始之前的起始样式   
	         el.style.transform="translate(0,0)"        },        
	         enter(el){            
	         // 这句话，没有实际作用，但是如果不写，出不来动画效果            
	        // 可以认为el.offsetWidth会强制动画刷新            
	        el.offsetWidth;           
	       // 表示动画开始至之后的样式，可以设置小球完成动画之后的 结束状态             
	       el.style.transform="translate(150px,200px)";            el.style.transition="all 1s ease";        
	       //    done();        },        
	       afterEnter(el){            
	       // 动画完成之后           
	        this.flag1=!this.flag1;        },
<script>	
<style scoped>
/* 自定义两组样式，来控制transition内部元素实现动画 */
/* v-enter【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】是动离开之后，离开的终止状态，此时，元素动画已经结束 */
.v-enter,.v-leave-to{   
	 opacity:0;    
	 transform:translateX(400px);}
	 .v-enter-active,.v-leave-active{    
	 transition:all 1s ease;
	}
.ball{    
	width:15px;height:15px;   
	 border-radius: 50%;  
	 background-color:red;}
 li{
 	border:1px dashed #999;margin:5px;
	 line-height:35px;padding-left:5px;
	 width:100%;}
 li:hover{    
	 background-color: pink;    
	 transition:all 0.8s ease;}
 .my-enter,.my-leave-to{    
	 opacity:0;    
	 transform:all 1s ease;}
 .my-enter-active,.my-leave-active{   
	  transition:all 0.6s ease}
/* 下面.my-move和.my-leave-active配合使用，能够实现列表后续的元素，渐渐的飘上来的效果 */
.my-move{    
	transition:all 0.6s ease; }
.my-leave-active{position:absolute;}
  </style>