transition-group 使用
本篇主要是记录transition-group的使用心得。官方文档:https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E8%BF%87%E6%B8%A1transition-group用于列表的过渡效果。默认为span, 可以使用tag 转换为其他元素。子元素通常使用v-for进行循环。子元素必须...
·
本篇主要是记录transition-group的使用心得。
官方文档:https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E8%BF%87%E6%B8%A1
transition-group用于列表的过渡效果。
- 默认为span, 可以使用tag 转换为其他元素。
- 子元素通常使用v-for进行循环。
- 子元素必须要有唯一的key属性,且key不能为索引值。
- css过渡是应用在子元素中,而不是这个容器本身。
- 对应的js事件钩子:before-enter、enter、after-enter、enter-cancelled、before-leave、leave、after-leave、leave-cancelled
一. 结合css做列表的过渡效果。
通过设置各个子元素不同的 transition-delay的值,来实现子元素依次出现的效果。
缺点: css代码多,如果子元素个数不固定的话,兼容实现很复杂。
对应代码: https://codepen.io/summerhll/pen/KKwNPMj
整行过渡: https://codepen.io/summerhll/pen/JjobMwd
<!--
如果需要过滤的元素是通过v-for循环渲染出来,不能使用transition包裹,需要使用transition-group
如果要为v-for循环创建元素设置动画,必须为每一个元素设置:key属性
-->
<transition-group class="content" tag="ul" name="fade-list">
<li v-for="item in list" :key="item.code" v-show="show">
{{item.text}}
</li>
</transition-group>
.content {
li {
width: 100%;
margin-bottom: 20px;
border: 1px solid black;
height: 48px;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
}
}
.fade-list-enter-active {
opacity: 0;
transform: translateY(100%);
transition: all 0.3s;
}
.fade-list-enter-to {
opacity: 1;
transform: translateY(0);
}
.fade-list-enter-active:nth-child(1) {
transition-delay: 0s;
}
.fade-list-enter-active:nth-child(2) {
transition-delay: 0.15s;
}
.fade-list-enter-active:nth-child(3) {
transition-delay: 0.3s;
}
.fade-list-enter-active:nth-child(4) {
transition-delay: 0.45s;
}
.fade-list-enter-active:nth-child(5) {
transition-delay: 0.6s;
}
.fade-list-enter-active:nth-child(6) {
transition-delay: 0.75s;
}
export default {
data () {
return {
show: false,
list: [
{ code: 0, text: "第一个" },
{ code: 1, text: "第二个" },
{ code: 2, text: "第三个" },
{ code: 3, text: "第四个" },
{ code: 4, text: "第五个" },
{ code: 5, text: "第六个" }
]
}
},
mounted () {
this.show = true;
}
}
二.接口js做的列表过渡效果
监听对应的js钩子,作出子元素依次出现的效果。
需要在v-for循环处设置子元素data-delay的值各部相同。
对应代码:https://codepen.io/summerhll/pen/LYEbPjj
容器切换、混合使用:https://codepen.io/summerhll/pen/abzBEPb
<!-- 这里加上 v-bind:css="false" 让vue跳过对css的检测,让我们更好控制 动画完成的时机。
如果不加,会影响动画效果 -->
<transition-group class="content" tag="ul" name="fade-list"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<li v-for="(item, index) in list" :key="item.code"
v-show="show"
:data-delay="index * 150">
{{item.text}}</li>
</transition-group>
export default {
data () {
return {
show: false,
list: [
{ code: 0, text: "第一个" },
{ code: 1, text: "第二个" },
{ code: 2, text: "第三个" },
{ code: 3, text: "第四个" },
{ code: 4, text: "第五个" },
{ code: 5, text: "第六个" }
]
}
},
mounted () {
this.show = true;
},
methods: {
beforeEnter (dom) {
dom.classList.add('fade-list-enter-active');
},
enter (dom, done) {
let delay = dom.dataset.delay;
setTimeout(() => {
dom.classList.remove('fade-list-enter-active');
dom.classList.add('fade-list-enter-to');
let transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
dom.addEventListener(transitionend, function onEnd () {
dom.removeEventListener(transitionend, onEnd);
done(); //调用done() 告诉vue动画已完成,以触发 afterEnter 钩子
})
}, delay);
},
afterEnter (dom) {
dom.classList.remove('fade-list-enter-to');
}
}
}
.content {
li {
width: 100%;
margin-bottom: 20px;
border: 1px solid black;
height: 48px;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
}
}
.fade-list-enter-active {
opacity: 0;
transform: translateY(100%);
}
.fade-list-enter-to {
opacity: 1;
transform: translateY(0);
transition: all 0.3s; //transition要写在此处
}
更多推荐
已为社区贡献1条内容
所有评论(0)