到目前为止，关于过渡我们已经讲到，

  • 单个节点
  • 同一时间渲染多个节点的一个

那么怎么同时渲染整个列表，比如使用v-if？在这种场景下，使用<transition-group>组件，在我们深入例子之前，先了解关于这个组件的几个特点：

  • 不同于<transition>，它会以一个真实元素呈现，默认为一个<span>。你也可以通过tag特性更换为其他元素，
  • 内部元素总是需要提供唯一key属性值

列表的进入和离开过渡

现在让我们由一个简单的例子深入，进入和离开的过渡使用之前一样的css类名

<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>
 
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
}
})
 
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
列表的位移过渡
<transition-group>组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位，要使用这个新功能只需了解新增的v-move特性，它会在元素改变定位的过程中应用。像之前的类名一样，可以通过name属性自定义前缀，也可以通过move-class属性手动设置。
v-move对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子：
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
 
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div>
 
new Vue({
el: '#flip-list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
 
.flip-list-move {
transition: transform 1s;
}
 

在内部的实现上，vue使用了一个叫flip简单的动画队列，使用transfrom将元素从之前的位置平滑过渡新的位置。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
 
<div id="list-complete-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list-complete" tag="p">
<span
v-for="item in items"
v-bind:key="item"
class="list-complete-item"
>
{{ item }}
</span>
</transition-group>
</div>
new Vue({
el: '#list-complete-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
 
.list-complete-item {
transition: all 1s;
display: inline-block;
margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
.list-complete-leave-active {
position: absolute;
}
 
需要注意的是使用flip过渡的元素不能设置为display:inline.作为替代方案，可以设置为display:inline-block或者放置与flex中。
flip不仅可以实现单列过渡，多维网格的过渡也同样简单。
 
 
列表的渐进过渡
通过data属性与javascript通信，就可以实现列表的渐进过渡。
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
 
<div id="staggered-list-demo">
<input v-model="query">
<transition-group
name="staggered-fade"
tag="ul"
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<li
v-for="(item, index) in computedList"
v-bind:key="item.msg"
v-bind:data-index="index"
>{{ item.msg }}</li>
</transition-group>
</div>
 
new Vue({
el: '#staggered-list-demo',
data: {
query: '',
list: [
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
},
computed: {
computedList: function () {
var vm = this
return this.list.filter(function (item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.height = 0
},
enter: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 1, height: '1.6em' },
{ complete: done }
)
}, delay)
},
leave: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 0, height: 0 },
{ complete: done }
)
}, delay)
}
}
})
 
 
可复用的过渡
过渡可以通过vue的组件系统实现复用。要创建一个可复用的过渡组件，你需要做的就是将<transition>或<transition-group>作为根组件，然后将任何子组件放置其中就可以了。
使用模板的简单例子：
Vue.component('my-special-transition', {
template: '\
<transition\
name="very-special-transition"\
mode="out-in"\
v-on:before-enter="beforeEnter"\
v-on:after-enter="afterEnter"\
>\
<slot></slot>\
</transition>\
',
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})

函数组件更适合完成这个任务：

Vue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})

动态过渡

在vue中即使是过渡也是数据驱动的，动态过渡最基本的例子是通过name特性来绑定动态值。

<transition v-bind:name="transitionName">
<!-- ... -->
</transition>
当你想用vue的过渡系统来定义的css过渡/动画在不同过渡间非常有用。
所有的过渡特性都是动态绑定。它不仅是简单的特性，通过事件的钩子函数方法，可以在获取相应的上下文数据。这意味着，可以根据组件的状态通过javascript过渡设置不同的过渡效果。
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
 
<div id="dynamic-fade-demo" class="demo">
Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">
Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
<transition
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<p v-if="show">hello</p>
</transition>
<button
v-if="stop"
v-on:click="stop = false; show = false"
>Start animating</button>
<button
v-else
v-on:click="stop = true"
>Stop it!</button>
</div>
 
new Vue({
el: '#dynamic-fade-demo',
data: {
show: true,
fadeInDuration: 1000,
fadeOutDuration: 1000,
maxFadeDuration: 1500,
stop: true
},
mounted: function () {
this.show = false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
var vm = this
Velocity(el,
{ opacity: 1 },
{
duration: this.fadeInDuration,
complete: function () {
done()
if (!vm.stop) vm.show = false
}
}
)
},
leave: function (el, done) {
var vm = this
Velocity(el,
{ opacity: 0 },
{
duration: this.fadeOutDuration,
complete: function () {
done()
vm.show = true
}
}
)
}
}
})
 
最后，创建动态过渡的最终方案是组件通过接受props来动态修改之前的过渡。

vue 过渡效果-列表过渡的更多相关文章

  1. VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move

    本例要结合过渡动画四个过程的示意图一起理解. https://cn.vuejs.org/v2/guide/transitions.html 疑问: v-for="(item,i) in li ...

  2. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  3. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  4. vue总结 04过渡--进入/离开 列表过渡

    进入/离开 & 列表过渡 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CS ...

  5. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  6. Vue过渡效果之JS过渡

    前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transitio ...

  7. Vue基础进阶 之 列表过渡

    在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...

  8. vue过渡 & 动画---进入/离开 & 列表过渡

    (1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...

  9. Vue多元素过渡

    前面的话 前面分别介绍了单元素过渡的CSS过渡和JS过渡,本文将详细介绍Vue多元素过渡 常见示例 最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transition> & ...

随机推荐

  1. java中int取值范围是怎么计算的？

    首先jdk中定义int占4个字节 ===> 32位(后面全部的计算都是以此为根据的) 32位就是jvm仅仅给分配32个格子的空间,用以存放数据. 总所周知计算机中用0和1存放数据. 那么,32个 ...

  2. iOS：quartz2D绘图（在PDF文件上绘制图片）

    quartz2D还可以在PDF文件上绘制图片,它有自己的PDF Graphics Context上下文,通过UIGraphicsBeginPDFContextToFile方法开始上下文后就可以绘制图片 ...

  3. iOS：quartz2D绘图（给图形绘制阴影）

    quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数 注意:在drawRect:方法中同时调用绘制同一个图形时,在对绘制的图形做 ...

  4. JDK 7中的函数式编程思想[转载]

    原文作者的观点是Lambda表达式一定会包含在JDK 7中,而全文也着重介绍了这方面的知识,作者认为函数式编程的概念也将出现在JDK 7中. Lambda表达式 Lambda表达式并不是什么新概念,自 ...

  5. 【C#】：浅谈反射机制 【转】

    http://blog.csdn.net/lianjiangwei/article/details/47207875 什么是反射? 反射提供了封装程序集.模块和类型的对象(Type 类型).可以使用反 ...

  6. [Python爬虫] 之十一：Selenium +phantomjs抓取活动行中会议活动信息

    一.介绍 本例子用Selenium +phantomjs爬取活动行(http://www.huodongxing.com/search?qs=数字&city=全国&pi=1)的资讯信息 ...

  7. Spring整合JMS——三种connectionFactory

    1.SingleConnectionFactory:对于建立JMS服务器链接的请求会一直返回同一个链接,并且会忽略Connection的close方法调用.(org.springframework.j ...

  8. SQL多表连接查询（具体实例）

    本文主要列举两张和三张表来讲述多表连接查询. 新建两张表: 表1:student  截图例如以下: 表2:course  截图例如以下: (此时这样建表仅仅是为了演示连接SQL语句.当然实际开发中我们 ...

  9. java程序main方法的参数String[] args

    public class ArgsTest { public static void main(String[] args) { System.out.println(args.length); fo ...

  10. 在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的？

    如何在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的? 解决方案:将整列单元格格式设为文本,然后,选中该列,数据--分列--完成 详细步骤: (1)选中1行或者1列,再单击 ...