2021-03-25 动态列表动画的组件外架

transMove.vue 实现动画外衣

<template>
    <div :class="['kyol-transMove',[className]]" :style="{'--transMoveDuration':duration + 's' ,height:height+'px',width:width+'px'}">
        <slot name="title"/>
        <!-- 迭代插槽作用域 -->
        <transition-group   name="moving" @after-leave="after" tag="div" v-if="dataList.length" class="content" >
            <!-- 注意 循环样式写在 content-item 类上-->
            <div v-for="item in dataList" :key="'move_' + random +'_'+ item['_index']" class="content-item"  @mouseenter="onMouseEnter(item)" @mouseleave="onMouseLeave(item)">
                <slot :row="item" :_index="item._index">
                    {{item._index}}
                </slot>
            </div>
        </transition-group>
    </div>
</template>
<script>
export default {
    // 动画列表组件
    name:'transMove',
    props:{
        rowKey:String,//行唯一标识符
        data:{
            type:Array,defaulte:()=>[]
        },
        //动画时长
        duration:{
            type:Number,default:1
        },
        // 动画速度 0-无穷
        speed:{
            type:Number,default:1500
        },
        // 类定义名称
        className:String,
        // 自动执行动画
        auto:{
            type:Boolean,default:true
        },
        // 默认显示几行，小于或者等于当前行数  不执行动画效果
        showLine:{
            type:Number,default:3
        },
        mouseEnter:Function,
        mouseLeave:Function,
        height:Number,
        width:Number,
        test:Boolean,// 测试
    },
    data(){
        return {
            testList:[{a:1,b:'bbb111',c:3},{a:222,b:'bbbb2',c:3},{a:3333,b:'bbbb33',c:3},{a:44444,b:'bbbb33',c:3}],
            dataList:[],// 列表数据
            random:Math.random().toFixed(4)*10000 
        }
    },
    watch:{
        'data':{
            handler(cval){
                const isArray_object = Array.isArray(cval) && cval.length && !Array.isArray(cval)[0] && typeof(cval[0]) === 'object'
                if(!isArray_object) return 
                this.dataList = cval.map((item,i) => ({...item,_index:item.rowKey || i}))
                if(this.dataList.length && !this.run.id && this.auto) setTimeout(_ => this.run(),2000)
            },
            immediate:true
        }
    },
    methods:{
        run(){
            const run  = _ =>{
                if(this.dataList.length <= this.size) return this.stop()
                this.run.row = this.dataList.shift()
            }
            this.run.id = setInterval(run,this.speed)
        },
        stop(){
            if(this.run.id) {
                clearInterval(this.run.id)
                this.run.id = null
            }
            this.$emit('stop')
        },
        after(){
            this.dataList.push(this.run.row)
            this.$emit('after-leave')
        },
        onMouseEnter(item){
            this.mouseEnter ? this.mouseEnter(item) : this.stop()
        },
        onMouseLeave(){
            this.mouseLeave ? this.onMouseLeave(item) : this.auto? this.run() : ''
        }
    },
    beforeRouteLeave (to, from, next) {
        // ...
        this.stop()
    }
}
</script>
<style lang="scss" scoped>
    .kyol-transMove{
        $speed:var(--transMoveDuration);
        position: relative;
        overflow: hidden;
        /*动画*/
        .content{
            position: relative;
        }
        .moving-leave-to{
            opacity:0;
            transform: translateY(-50%);
        }
        .moving-enter-to{
            opacity: 0;
        }
        .moving-leave-active,.moving-enter-active{
            transition:all $speed ease;
            position: absolute;
            left: 0;
            right: 0;
        }
        .moving-enter-active{
            opacity: 0;
        }
        .moving-leave{
            opacity: 1;
        }
        .moving-move{
            transition:all $speed ease;
        }

    }
</style>