Vue动画学习

古城微笑少年丶 2022-03-02 04:49 355阅读 0赞

### 单元素/组件的过渡 ###

Vue提供transition的封装组件，在下列情形中，可以给任何元素和组件添加进入和过渡动画

1.  条件渲染(v-if)
2.  条件展示(v-show)
3.  动态组件
4.  组件根节点  
    典型的案例
    
        <!DOCTYPE html>
            <html lang="en">
            <head>
            	<meta charset="UTF-8">
            	<title>Document</title>
            	<script src="vue.min.js"></script>
            	<style> .fade-enter-active, .fade-leave-active { transition: opacity 2s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>
            </head>
            <body>
            	<div id="app">
            		<button @click='show=!show'>toggle</button>
            		<transition name="fade">
            		    <p v-show="show">hello</p>
            		 </transition>
            	</div>
            </body>
            <script> var vm = new Vue({ el:'#app', data:{ show:true, }, methods:{ }, }) </script>
            </html>

当插入或删除包含在transition元素时，Vue做以下处理:

1.  自动嗅探目标元素是否应用了CSS动画或过渡，如果是：将在恰当的时机进行删除或则插入
2.  如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3.  如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。  
    类名解释
4.  v-enter ：定义过渡开始的状态。
5.  v-enter-active ：定义过渡生效时的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
6.  v-enter-to： 定义进入过渡的结束状态 。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
7.  v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
8.  v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
9.  v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。  
    ![过程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]  
    对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

#### 使用贝塞尔曲线 ####

[贝塞尔曲线可视化官网][Link 1]  
我们可以依照我们的需求。根据曲线的可视化，复制保存来实现动画的曲线速度

.translate-enter-active,.translate-leave-active{ 
    			transition: all 2s cubic-bezier(.21,.77,1,.61) 0s;
    		}
    		.translate-enter,.translate-leave-to{ 
    			transform: translateY(200px)
    		}

<div id="app1">
    		
    		<button @click='flag=!flag'>移动</button>
    		<transition name="translate">
    			<p v-if='flag'>使用贝塞尔曲线的移动</p>
    		</transition>
    	</div>

var vm1 = new Vue({ 
    		el:'#app1',
    		data:{ 
    			flag:true
    		}
    	})

### 动画 ###

var vm2 = new Vue({ 
    		el:'#app2',
    		data:{ 
    			show:true
    		}
    	})

.bounce-enter-active { 
    		  animation: bounce-in .5s;
    		}
    		.bounce-leave-active { 
    		  animation: bounce-in .5s reverse;
    		  /* reverse 是animation-direction，这里是返向方向，从最后一帧往前播放 */
    		}
    		@keyframes bounce-in { 
    		  0% { 
    		    transform: scale(0);
    		  }
    		  50% { 
    		    transform: scale(2);
    		  }
    		  100% { 
    		    transform: scale(1);
    		  }
    		}

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。  
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

### 自定义动画类名 ###

[css动画官网][css] ：可以通过官网找到我们想要的动画

*  enter-class
 *  enter-active-class
 *  enter-to-class (2.1.8+)
 *  leave-class
 *  leave-active-class
 *  leave-to-class (2.1.8+)

##### 下载动画并且引入（组件可以使用import或查看文档） #####

git clone https://daneden.github.io/animate.css/
    <link rel="stylesheet" href="animate.css">

结合其他第三方 CSS 动画库来使用它

<div id="app3">
    
    		<button @click='flag=!flag'>动画</button>
    		<transition enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutRight" >
    			<p v-if="flag">使用第三方库</p>
    		</transition>
    	</div>

### 动画钩子 ###

<!DOCTYPE html>
        <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<title>钩子</title>
        </head>
        <body>
        	<div id="demo">
        		<transition @before-enter='beforeEnter' @enter="enter" @after-enter="afterEnter" ></transition>
        	</div>
        </body>
        <script src="vue.min.js"></script>
        <script> let vm = new Vue({ el:'#demo', data:{ }, methods:{ beforeEnter(el){ // befroeEnter表示动画开始之前，此时：动画尚未开始，可以在动画开始之前，设置动画的初始样式 }, // 当与css样式结合时，这里done是可选的 enter(el,done){ // enter表示动画开始之后的样式，这里，可以设置小球完成的结束状态 // el.offsetWidth :可以理解为强制刷新动画 // done() 是afterEnter函数的引用 }, afterEnter(){ // 完成动画后 } } }) </script>
        </html>

1.  推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
2.  当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。  
    **动画钩子点击按钮实现小球移动案例**  
    ![点击实现小球移动效果][20190319183645192.gif]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue</title>
    	<script src="vue.min.js"></script>
    	<style> .ball{ position: absolute; left: 10px; top: 50px; width: 20px; height: 20px; background: red; border-radius: 10px; } </style>
    </head>
    <body>
    	<div id="demo1">
    		<button @click='show=!show'>小球移动</button>
    		<transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter' >
    			<span :class="['ball']" v-if='show'></span>
    		</transition>
    	</div>
    </body>
    <script> var vm = new Vue({ el:'#demo1', data:{ show:false, }, methods:{ beforeEnter(el){ el.style.transform = "translateX(0)" }, enter(el,done){ el.offsetWidth el.style.transform = "translate(300px,300px)" el.style.transition = 'all 3s' done() }, afterEnter(el){ this.show = !this.show } } }) </script>
    </html>

### 使用velocity ###

git clone https://github.com/julianshapiro/velocity.git

<div id="example-4">
    	  <button @click="show = !show">
    	    Toggle
    	  </button>
    	  <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" >
    	    <p v-if="show">
    	      Demo
    	    </p>
    	  </transition>
    	</div>
    	<script> new Vue({ el: '#example-4', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.style.transformOrigin = 'left' }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) Velocity(el, { fontSize: '1em' }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } } }) </script>

但是发现并没有实现旋转，只有部分功能，所以还是按照Vue的来，引入就的velocity文件

### 初始渲染的过渡 ###

可以通过 appear 特性设置节点在初始渲染的过渡

### 多个元素过渡 ###

1.  key的使用:不使用key，则没有动画效果，只会替换内容，有了key，有两个按钮的出现

.v-enter,.v-leave-to{ 
    			opacity: 0;
    		}
    		.v-enter-active,.v-leave-active{ 
    			transition: all 3s;
    		}

<div id="example2">
    		<transition>
    		  <button v-bind:key="isEditing" @click='toggle'>
    		    {
       { isEditing ? 'Save' : 'Edit' }}
    		  </button>
    		</transition>
    	</div>

> 当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 组件中的多个元素设置 key 是一个更好的实践。

1.  mode特性

*  in-out：新元素先进行过渡，完成之后当前元素过渡离开。
 *  out-in：当前元素先进行过渡，完成之后新元素过渡进入  
    上面两个按钮在实现动画过渡时，第一个按钮会占用第二个按钮的位置：是因为按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是 的默认行为 - 进入和离开同时发生。

<transition mode="out-in">
    		  <button v-bind:key="isEditing" @click='toggle'>
    		    {
       { isEditing ? 'Save' : 'Edit' }}
    		  </button>
    		</transition>

### 列表过渡 ###

通过一个案例分析:添加id和姓名  
![入场效果][20190319183926662.gif]

li{ 
    			margin: 10px;
    			padding: 10px;
    			border: 1px dashed #ccc;
    			font-size: 12px;
    		}
    		.v-enter,.v-leave-to{ 
    			transform: translateY(100px);
    		}
    		.v-enter-active,.v-leave-active{ 
    			transition: all 0.6s;
    		}
    		.v-move { 
          		transition: all 0.6s ease;
        	}

var vm = new Vue({ 
    	el:'#app',
    	data:{ 
    		id: '',
            name: '',
            list: [
              { id:1, name: '赵高'},
              { id:2, name: '秦桧'},
              { id:3, name: '严嵩'},
              { id:4, name: '魏忠贤'}
            ]
    	},
    	methods:{ 
    		add(){ 
    			let obj = { id:this.id,name:this.name}
    			this.list.push(obj)
    		}
    	}
    })

1.  **tag**: transition-group会以一个真实的元素渲染，默认是一个span标签，通过tag更改为其他元素
2.  **appear**:实现列表入场动画的效果：这里设置：translateY(100px)
3.  **key**内部元素总是需要一个key值，否则Vue只会替换其内容，所以要让Vue来区分它们
4.  **v-move**类名,实现平滑过渡(当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡);当然可以使用name改变v前缀

### 先学到这 ###

[Vue动画官方文档][Vue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220302/d28356e63b91406c981b1af6305d9af1.png
[Link 1]: http://cubic-bezier.com/#.17,.67,.83,.67
[css]: https://daneden.github.io/animate.css/
[20190319183645192.gif]: /images/20220302/d0d97c8fedb34e9185bf0fea84680126.png
[20190319183926662.gif]: /images/20220302/27ecd94859014c6ea88014f551195643.png
[Vue]: https://cn.vuejs.org/v2/guide/transitions.html