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

来源：互联网发布：网络教研课题结项编辑：程序博客网时间：2024/06/06 21:27

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

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

一、单元素过渡

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

html

<button v-on:click="show = !show">Toggle</button><transition name="fade">  <p v-if="show">hello,看我渐渐地消失。</p></transition>

css

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

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

注意：

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀(也就是例子中的fade，这个是可以自定义的)。使用 <transition name="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 “

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="css/animate.min.css"></head><body><div id="demo"><button @click="show = !show">看我</button><transition enter-active-class="lookshow"leave-active-class="animated tada"><p v-if="show">hello</p></transition></div><script type="text/javascript" src='js/vue.js'></script><script type="text/javascript">new Vue({  el: '#demo',  data: {    show: true  }})</script></body></html>

注意：这里要加上 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 特性设置节点的在初始渲染的过渡

<transition appear>  <!-- ... --></transition>

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

<transition  appear  appear-class="custom-appear-class"  appear-to-class="custom-appear-to-class" (2.1.8+)  appear-active-class="custom-appear-active-class">  <!-- ... --></transition>

自定义 JavaScript 钩子:

<transition  appear  v-on:before-appear="customBeforeAppearHook"  v-on:appear="customAppearHook"  v-on:after-appear="customAfterAppearHook"  v-on:appear-cancelled="customAppearCancelledHook">  <!-- ... --></transition>

五.多元素过渡

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">    .fade-enter-active, .fade-leave-active {  transition: opacity .5s}.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {  opacity: 0}    </style></head><body><div id="demo"><button @click="show = !show">点击查看变化</button><transition name="fade">      <div v-if="show">    请看我的变化div</div><p v-else="fade">我也会变化pppp</p></transition></div><script type="text/javascript" src='js/vue.js'></script><script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script><script type="text/javascript">new Vue({    el : "#demo",    data : {        show : true    }})</script></body></html>

② 利用属性 key (推荐)

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

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

 <style type="text/css">    .fade-enter-active, .fade-leave-active {  transition: opacity .5s}.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {  opacity: 0}    </style><div id="demo"> <!-- v-if 、v-show 和 key 配合切换更多元素-->      <button @click="showa">点击查看变化</button>      <transition name="fade">              <div v-if="show == 'one'" key="one">            oneoneoneone        </div>        <div v-if="show == 'two'" key="two">           twotwotwotwo        </div>        <div v-if="show == 'three'" key="three">           threethreethree        </div>      </transition></div><script type="text/javascript">new Vue({    el : "#demo",    data : {        show : true    },    methods:{        showa:function (){if(this.show == 'one'){return this.show = 'two';}else if(this.show == 'two'){return this.show = 'three';}else{return this.show = 'one';}        }    }    })</script>

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">.no-mode-translate-demo-wrapper {  position: relative;  height: 18px;}.no-mode-translate-demo-wrapper button {  position: absolute;}.no-mode-translate-fade-enter-active, .no-mode-translate-fade-leave-active {  transition: all 1s;}.no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active {  opacity: 0;}.no-mode-translate-fade-enter {  transform: translateX(31px);}.no-mode-translate-fade-leave-active {  transform: translateX(-31px);}    </style></head><body><div id="app">    <div id="no-mode-demo" class="no-mode-translate-demo-wrapper ">        <transition name="no-mode-translate-fade" mode="in-out">            <button v-if="on" key="on" @click="on = false">on</button>            <button v-else="" key="off" @click="on = true">off</button>        </transition>    </div></div><script type="text/javascript" src='js/vue.js'></script><script type="text/javascript">new Vue({        el: '#no-mode-demo',        data: {            on: false        }    })</script></script></body></html>

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

当把上面例子中<transition name="no-mode-translate-fade" mode="in-out">mode="in-out"

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

六.多组件过渡

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">.fade-enter-active,.fade-leave-active { transition: all 1s linear;}.fade-enter,.fade-leave-active {  opacity: 0;  transform:translateX(50px);}    </style></head><body><div id="app"><button @click="show">点击查看变化</button><transition name="fade" mode = "out-in">          <component v-bind:is="view"></component>        <!-- 组件替换用 is属性 --></transition></div><script type="text/javascript" src='js/vue.js'></script><script type="text/javascript">new Vue({el: '#app',data:{        view:"a-view",    },    components: {"a-view":{template:"<div>我是第一个模板</div>"},"b-view":{template:"<div>我是第二个模板</div>"}    },    methods:{        show:function(){            this.view = this.view == "a-view"?"b-view":"a-view";        }    }})</script></body></html>

七.列表过渡

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

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

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

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

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

如：

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="css/animate.min.css">    <style type="text/css">span{    display:inline-block;    padding:10px;}.position{position: absolute;} .list-complete-item{transition:all .3s linear;}    </style></head><body><div id="myDiv"><button @click="add">随机增加数字</button><button @click="remvoed">随机删除数字</button><button @click="suffle">随机排序</button><transition-group tag="div"  name="flip-list" enter-active-class="animated bounceInUp position" leave-active-class="animated bounceOutDown position">      <span v-for="item in list" :key="item" class="list-complete-item">{{item}}</span></transition-group></div><script type="text/javascript" src='js/vue.js'></script><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script><script type="text/javascript">new Vue({el:"#myDiv",    data:{ //这里写代码片        list:[1,2,3,4,5],        addNumber:5    },    methods:{        randomIndex:function(){ //随机插入的位置            return Math.floor(Math.random()*this.list.length);        },        add:function(){            this.list.splice(this.randomIndex(),0,++this.addNumber)        },        remvoed:function(){            this.list.splice(this.randomIndex(),1);        },        suffle:function(){            this.list = _.shuffle(this.list)        }    }})</script></body></html>

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

2.列表的渐进过渡

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

3.可复用的过渡

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

4.动态过渡

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

<transition v-bind:name="transitionName">
  <!-- ... -->
</transition>

阅读全文

0 0