Vue.js学习笔记：过渡效果（含列表过渡）

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

• 条件渲染 （使用 v-if）
• 条件展示 （使用 v-show）
• 动态组件
• 组件根节点

一、单元素过渡

1. 一般需要过渡的元素要放在 组件中 ，过渡有四个状态 
   ①. enter 元素进入时第一帧的状态 
   ②. enter-active 元素从进入第一帧后到完成过渡的这一过程的状态 
   ③. leave 元素离开时的第一帧状态 
   ④. leave-active 元素离开第一帧后到完成过渡的这一过程的状态 
   列如： 
   2 . css过渡

html

Toggle
	
	  	
hello,看我渐渐地消失。
	

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}

js

new Vue({
	  el: '#demo',
	  data: {
	    show: true
	  }
	})

注意：

     对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀(也就是例子中的fade，这个是可以自定义的)。使用 可以重置前缀，比如 v-enter 替换为 fade-enter。下面会介绍

二.自定义过渡类名

自定义过渡类就不需要 中的name属性了。类名可以是自己随意起，也可引入第三方动画库animate.css, 但是需要在 加入一些添加类名的属性

• enter-class=类名 

• enter-active-class=类名 (常用) 

• leave-class=类名 

• leave-active-class=类名 (常用)


在引入第三方动画库 animate.css 时 以上属性要先添加 animated 类， 在添加 动画类名，例如： 
enter-class=”animated tada “

    
    
    



	看我
	
		
hello
	

注意：这里要加上 animated 才会有效果 (第一个是我自己写的类名，不用加，但是引入animate.css 需要在前面加animate)

同时使用 Transitions 和 Animations

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

三.JavaScript 钩子

① before-enter 
② enter 
③ after-enter 
④ enter-cancelled (在 v-show 中应用) 
⑤ before-leave 
⑥ leave 
⑦ after-leave 
⑧ leave-cancelled (在 v-show 中应用)

       这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

      当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 
否则，它们会被同步调用，过渡会立即完成。

如：

四.初始渲染的过渡

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

这里默认和进入和离开过渡一样，同样也可以自定义 CSS 类名。

自定义 JavaScript 钩子:

五.多元素过渡

1.实现多个元素过渡用 
① v-if 和 v-else 或 v-else-if （两个相邻元素要求不一样）

    
    
    



	点击查看变化
	      
		

		    请看我的变化div
		
		
我也会变化pppp
	

② 利用 属性 key (推荐)

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

③ v-if 和 key属性 混合使用

 


 
      点击查看变化
            
        

            oneoneoneone
        
        

           twotwotwotwo
        
        

           threethreethree
        
      

2.过渡模式 
在多个元素过渡时，这些元素会同时出发，vue 提供了两个属性，在 中加入 mode 属性，它有两个值

A.in-out: 新元素先进行过渡，完成之后当前元素过渡离开。 

    
    
    



    

        
            on
            off
        
    

B.out-in: 当前元素先进行过渡，完成之后新元素过渡进入。

当把上面例子中mode="in-out"

改为mode="out-in"时，效果是不一样。

六.多组件过渡

多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反，我们只需要使用动态组件（component）

1.多组件过渡，利用 is 属性

    
    
    



	点击查看变化
	      
	        
	    
	

七.列表过渡

列表的过渡需要用 v-for 和   组件 
注意： 
① 列表   在页面渲染出来是个 span 标签， 如果你想更改它用 tag 属性。例如  渲染出来就是div 

② 列表在循环时 要给每一个列表项添加唯一的key 属性值。这样列表才会有过渡效果

1. FLIP 简单的动画队列(使用 transforms 将元素从之前的位置平滑过渡新的位置)

列表的位移过渡（ 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。）

只需了解新增的 v-move 特性：v-move 对于设置过渡的切换时机和过渡曲线非常有用。

如：

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中

引入lodash.min.js 实现随机排序

    
    
    
    



	随机增加数字
	随机删除数字
	随机排序
	     
	 	{{item}}
	

注意：FLIP 动画不仅可以实现单列过渡，多维网格的过渡也同样简单:

2.列表的渐进过渡

通过 data 属性与 JavaScript 通信 ，就可以实现列表的渐进过渡

3.可复用的过渡

要创建一个可复用过渡组件，你需要做的就是将  或者  作为根组件，然后将任何子组件放置在其中就可以了。

4.动态过渡

动态过渡最基本的例子是通过 name 特性来绑定动态值。

<transition v-bind:name="transitionName">

transition>