UFUse（1.6.2）

Appearance

On this page

vPull ​

v-pull 指令可以实现一个擦拭动画效果。

依赖项：gsap

使用 ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import vPull from 'ufuse/src/directives/vPull'

const key = ref(Date.now())
</script>

<template>
  <div class="demo">
    <button @click="key = Date.now()">
      重新渲染
    </button>
    <br>
    <div :key="key" class="mt-10 inline-flex flex-col">
      <span v-pull>从左到右</span>
      <br>
      <span v-pull="{ direction: 'r2l' }">从右到左</span>
      <br>
      <span v-pull="{ direction: 't2b' }">从上到下</span>
      <br>
      <span v-pull="{ direction: 'b2t' }">从下到上</span>
    </div>
  </div>
</template>

预览 ​

API ​

ts
export interface VPullOptions {
  /**
   * 延迟时间，单位：毫秒
   * @default undefined
   */
  delay?: number
  /**
   * 动画方向
   * @default 'l2r'
   */
  direction?: 'l2r' | 'r2l' | 't2b' | 'b2t'
  /**
   * 动画时长，单位：毫秒
   * @default 1000
   */
  duration?: number
}

贡献者 ​

cuijin
xieyuhang