v-slid-in 滑入动画指令 ​

一个简单的滑入动画指令，当元素进入视口时会从下往上滑入。

滑入动画预览 ​

import { vSlideIn } from '@qxs-bns/directives'

注册 vSlideIn 后，即可在模板中使用 v-slide-in。

滑入动画预览 ​

通过 v-slide-in 指令来使用滑入动画效果。

动画配置 ​

该指令使用以下默认配置：

• 滑动距离：20px
• 动画时长：500ms
• 缓动函数：ease-in-out

工作原理 ​

1. 当元素被插入到 DOM 中时，指令会检查元素是否在视口下方
2. 如果元素在视口下方，会创建一个滑入动画并暂停
3. 使用 IntersectionObserver 监听元素是否进入视口
4. 当元素进入视口时，动画会自动播放
5. 动画播放完成后，观察器会停止监听该元素