Vue2.x-使用transition-group实现筛选时内容展示隐藏时动画效果
代码:
<template> <div> <input type="text" v-model="keyword" /> <transition-group name="list" tag="div" class="box"> <p v-for="(item, index) in list" :key="item.id">{{ item.name }}</p> </transition-group> </div> </template> <script> export default { data() { return { keyword: '', itemList: [ { id: 0, name: 'test1' }, { id: 1, name: 'test2' }, { id: 2, name: 'test3' }, { id: 3, name: 'test4' }, { id: 4, name: 'test5' }, { id: 5, name: 'test6' }, { id: 6, name: 'test7' }, { id: 7, name: 'test8' }, { id: 8, name: 'test9' } ] }; }, computed: { list() { return this.itemList.filter(item => item.name.includes(this.keyword)); } } }; </script> <style scoped lang="scss"> * { margin: 0; font-size: 18px; } .box { position: absolute; left: 50%; transform: translateX(-50%); width: 500px; } p { line-height: 50px; text-align: center; border-bottom: 1px solid black; } .list-enter-active, .list-leave-active { transition: all 0.5s; } .list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ { opacity: 0; transform: translateY(50px); } </style>
效果: