animation-list
简介
- animation-list 基于vue列表动画插件,支持vue3.0
引用
- 安装
npm i 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>
.list {
display: flex;
flex-wrap: wrap;
text-align: center;
line-height: 50px;
}
.list .item {
width: 100px;
height: 50px;
border: 1px solid gainsboro;
margin: 5px;
box-shadow: 4px 5px 9px gainsboro;
color: gray;
border-radius: 4px;
}
</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?.reAnimationList()
})
}, 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/index.d'
</script>
<style scoped>
.list {
display: flex;
flex-wrap: wrap;
text-align: center;
line-height: 50px;
}
.list .item {
width: 100px;
height: 50px;
border: 1px solid gainsboro;
margin: 5px;
box-shadow: 4px 5px 9px gainsboro;
color: gray;
border-radius: 4px;
}
/** 自定义动画部分(必须) **/
.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:()=>{}
})
附
-
1.x.x - vue2 相关文档,请以该版本的 README 为准
-
2.1.x - vue3