animation-list 一个轻量级的列表动画插件

animation-list是一个基于Vue的轻量级动画插件，可以快速创建可定制化的动画效果。它支持多种动画类型、循环播放、自定义时间间隔、回调函数等特性。

animation-list插件的实现方式是动态设置animation动画，并通过addEventListener方法来监听动画的结束回调。在开始下一个元素的动画之前，会等待当前元素的动画完全结束。

安装

• npm安装

npm install animation-list

• yarn安装

npm install animation-list

例子

<template>
  <AnimationList ref="animationListRef">
    <div class="item" v-for="item in 8" :key="item">{{ item }}</div>
  </AnimationList>
</template>
​
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import AnimationList from 'animation-list/AnimationList.vue'
const animationListRef = ref<InstanceType<typeof AnimationList>>()
onMounted(() => {
  animationListRef.value?.initHooks({
    end: () => {
        console.log('动画结束')
        animationListRef.value?.animationCall() // 重新触发动画
    }
  })
})
</script>
​
<style  scoped>
.animation-list {
  overflow: hidden;
}
</style>

参数

属性

参数	默认值	备注
firstShow	true	默认是否渲染动画
deep	false	是否深层查找
animationType	ANIMATION_TYPE.RIGHT_LEFT	默认从右到左动画

ANIMATION_TYPE默认动画

key	动画	效果	备注
BOTTOM_TOP	bottom-top	从下向上
TOP_BOTTOM	top-bottom	从上向下
RIGHT_LEFT	right-left	从右到左	默认
LEFT_RIGHT	left-right	从左到右
SAMLL_BIG	small-big	从小到大
BIG_SMALL	big-small	从大到小
CUSTOM	custom	自定义动画	根据例子自定义动画

异步渲染流程

// 1.设置属性取消默认渲染动画 firstShow
// 2.获取数据后重新触发
import { onMounted, ref,nextTick } from 'vue'
setTimeout(() => {
    // 获取数据
    nextTick(() => {
        animationListRef.value?.animationCall()
    })
}, 1500)

自定义动画

<template>
<AnimationList ref="animationListRef" :animationType="ANIMATION_TYPE.CUSTOM">
    <div class="item" v-for="item in 8" :key="item">{{ item }}</div>
    </AnimationList>
</template>
<script lang="ts" setup>
    import AnimationList from 'animation-list/AnimationList.vue'
    import { ANIMATION_TYPE } from "animation-list/uitls";
​
</script>
​
<style  scoped>
    .animation-list {
        overflow: hidden;
    }
    /** 自定义动画部分(必须) **/
    .ls-custom {
        display: block;
        opacity: 1 !important;
    }
    .ls-custom {
        animation: ls-custom ease 0.26s !important;
    }
    @keyframes ls-custom {
        0% {
            opacity: 0;
            transform: scale(1.6);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
​
</style>

• 在 style 样式加入

  • ls-custom 初始化
  • ls-custom 动画开始
  • keyframes 动画

hooks生命周期

animationListRef.value?.initHooks({
    start:()=>{},
    update:()=>{},
    end:()=>{}
})

业务场景

通常情况下，我们会在获取数据之后才开始渲染列表。在使用animation-list插件时，可以先设置firstShow属性为false，然后在数据加载成功后调用animationCall()函数来渲染动画效果。当然，在渲染动画之前，需要确保元素已经加载完成。