Vue中的列表过渡
2019-06-10 本文已影响0人
meteornnnight
- 组件的切换
<transition>
<component :is="componentChoice">
</component>
</transition
- 单个元素的切换
<transition>
<button :key="isEditing">
{{isEditing}}
</button>
</transition>
不管是组件切换还是单个元素的切换，<transition>标签内部在一个时间都是只有一个元素或者一个组件。
下面我们来看一下列表过渡
在vue的官方文档中指出：
- 不同于
<transition>，它会以一个真实元素呈现：默认为一个<span>。你也可以通过tag特性更换为其他元素。- 过渡模式不可用，因为我们不再相互切换特有的元素。
- 内部元素 总是需要 提供唯一的
key属性值。
过渡模式指的是mode='in-out'/'out-in'命令，可以指定离开过渡动画和进入动画的先后顺序。
List Move Transition
对于list来说，除了插入元素enter和移除元素leave会产生动画效果，还提供了一个动画效果：即在元素的position发生改变时，为元素加上v-moveclass标签。利用这个原理，我们可以这样写：
.v-move{
transition: transform 1s;
}
在vue的官方教程中，还有这样的一个栗子：
<transition-group name="list-complete" tag="p">
<span v-for="item in list" :key="item" class="list-item">
{{item}}
</span>
</transition-group>
//css
.list-item{
transition: all 1s;
display: inline-block;
margin-right: 15px;
}
.list-complete-leave-active{
position: absolute;
}
为所有的元素都加上了list-itemclass标签，并加上transition rule，这样当列表元素的任何一个css样式发生变化的时候（enter，leave，move），都会产生过渡效果。
我们在list-complete-leave-active的css规则中，我们把要移除的元素脱离了文档流，否则，要移除的元素在移除过渡中一直处于文档流中，影响了后面元素的move过渡效果。
这样的话，当我们插入或移除一个元素，影响其他元素的位置的时候，由于vue存在move transition这一机制，元素会平滑过渡到它们新的位置上。
List Stagger Transition
元素的交错过渡是怎么实现的呢？我们可以通过元素data-前缀的attribute，来设置不同delay的callback函数。
官方文档中给了一个很有意思的栗子：
<li v-for="item in computedList" :key="item.name" :data-index="index">
{{item.name}}
</li>
<script>
beforeEnter: function(el, done){
var delay=el.dataset.index*150;
setTimeout(function(){
Velocity(el,{opacity: 1, height:"1.6em"},{complete: done});
},delay);
}
</script>
li元素绑定的:data-index=index描述了li在列表中的位置，所以在列表中越靠前的li元素，过渡效果对应的回调函数执行得越早。
