再学vue3,36列表交叉过渡

原创
2021/09/12 21:38
阅读数 24

data属性与js通信,可实现列表交叉过渡.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/4.3.4/gsap.min.js"></script>

<div id="demo">
<input v-model="query" />
<transition-group
name="staggered-fade"
tag="ul"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<li
v-for="(item, index) in computedList"
:key="item.msg"
:data-index="index"
>
{{ item.msg }}
</li>
</transition-group>
</div>

js

const Demo = {
data() {
return {
query: '',
list: [
{ msg: '张三' },
{ msg: '李四' },
{ msg: '王五' },
{ msg: '赵六' },
{ msg: '钱七' }
]
}
},
computed: {
computedList() {
var vm = this
return this.list.filter(item => {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}
},
methods: {
beforeEnter(el) {
el.style.opacity = 0
el.style.height = 0
},
enter(el, done) {
gsap.to(el, {
opacity: 1,
height: '1.6em',
delay: el.dataset.index * 0.15,
onComplete: done
})
},
leave(el, done) {
gsap.to(el, {
opacity: 0,
height: 0,
delay: el.dataset.index * 0.15,
onComplete: done
})
}
}
}

Vue.createApp(Demo).mount('#demo')

感觉就是压了下来.


<transition>/<transition-group>作为根组件,将子组件放在里面.

Vue.component('my-special-transition', {
template: `
<transition name="very-special-transition" mode="out-in" @before-enter="beforeEnter" @after-enter="afterEnter">
<slot></slot>
</transition>
`,
methods: {
beforeEnter(el) {
// ...
},
afterEnter(el) {
// ...
}
}
})



本人的csdn博客:https://blog.csdn.net/fqbqrr

欢迎关注本人微信公众号

你可以通过https://fqbqrr.blog.csdn.net/article/details/107379697这里访问微信公众号常见内容.

让我们每天都进步一点.让我们每天都进步一点.


本人的csdn博客:https://blog.csdn.net/fqbqrr

欢迎关注本人微信公众号

你可以通过https://fqbqrr.blog.csdn.net/article/details/107379697这里访问微信公众号常见内容.

让我们每天都进步一点.


本文分享自微信公众号 - 周三石(gh_6eecda59ada1)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部