VUE3之Animation（二）

列表的交替动画

<template>
    <div>
        <input v-model="keyword">
        <transition-group tag="ul" name="sk" :css="false"
            @before-enter="beforeEnter"
            @enter="enter"
            @leave="leave">
            <li v-for="(item,index) in showNames" :key="item" :data-index="index">
                {{item}}
            </li>
        </transition-group>
    </div>
</template>

<script>
import gsap from 'gsap';
    export default {
        data() {
            return {
                names:["abc","cba","nba","sk","lilei","hmm","kobe"],
                keyword: ""
            }
        },
        computed:{
            showNames(){
                return this.names.filter(item=>item.indexOf(this.keyword)!==-1)
            }
        },
        methods: {
            beforeEnter(el){
                el.style.opacity=0;
                el.style.height=0;
            },
            enter(el,done){
                gsap.to(el,{
                    opacity:1,
                    height:"1.5em",
                    delay: el.dataset.index *0.2,
                    onComplete:done
                })
            },
            leave(el,done){
                gsap.to(el,{
                    opacity:0,
                    height:0,
                    delay: el.dataset.index *0.2,
                    onComplete:done
                })
            }
        },
    }
</script>

通过gsap的delay属性，实现根据下标完成延时显示的效果。