vue动画

男娘i 2022-01-05 07:19 291阅读 0赞

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

*          v-enter   v-enter-active   v-enter-to 
 *          v-leave   v-leave-active   v-leave-to 
 *          v-enter     【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 
 *         v-leave-to 【这是一个时间点】 是动画离开之后，动画离开的终止状态，此时，元素 动画已经结束了

**一  自定义实现动画**

**1. 使用 transition 元素（Vue 官方提供的），把 需要被动画控制的元素，包裹起来。不然 不能动。**  
  
    使用transition完成任何元素进入/离开的过渡组件需要满足下列条件:

*               1.1条件渲染（v-if）
 *               1.2条件展示（v-show）
 *               1.3动态组件
 *               1.4组件根节点

2. 自定义两组样式，来控制 transition 内部的元素实现动画

3.vm实例

1. HTML结构：
    
    		<div id="app">
    		    <input type="button" value="动起来" @click="myAnimate">
    		    
    		    <transition name="fade">
    		      <div v-show="isshow">动画哦</div>
    		    </transition>
    		  </div>
    
    2. VM 实例：
    
    		// 创建 Vue 实例，得到 ViewModel
    		var vm = new Vue({
    		  el: '#app',
    		  data: {
    		    isshow: false
    		  },
    		  methods: {
    		    myAnimate() {
    		      this.isshow = !this.isshow;
    		    }
    		  }
    		});
    
    3. 定义两组类样式：
    
    		/* 定义进入和离开时候的过渡状态 */
    		    .fade-enter-active,
    		    .fade-leave-active {
    		      transition: all 0.2s ease;
    		      position: absolute;
    		    }
    		
    		    /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
    		    .fade-enter,
    		    .fade-leave-to {
    		      opacity: 0;
    		      transform: translateX(100px);
    		    }