0.0.29 • Published 2 years ago

@anfo/huitr v0.0.29

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

HUITR 概览

这是一个跨 vue-router 页面的过渡动画设置库。动画部分使用 GSAP 库实现。

快速使用

Install

npm i @anfo/huitr

Usage

// main.ts / main.js
import App from './App.vue'
import HuitrPlugin from '@anfo/huitr'
import { createApp } from 'vue'

const app = createApp(App)

app.use(HuitrPlugin())
app.mount('#app')
<!-- Some View.vue file -->
<template>
    <!-- like <transition> -->
    <huitr-timeline>
        <div
            v-if="toggle"
            v-huitr-enter="{ from: { opacity: 0 }, to: { opacity: 1 } }"
            v-huitr-leave="{ opacity: 0 }"
            class="fixed h-full w-full bg-gradient-to-b from-sky-200 to-rose-400"
        ></div>
        <div
            v-else
            v-huitr-enter="{ from: { opacity: 0 }, to: { opacity: 1 } }"
            v-huitr-leave="{ opacity: 0 }"
            class="fixed h-full w-full bg-gradient-to-b from-sky-800 to-blue-400"
        ></div>
    </huitr-timeline>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'

    let toggle = ref(true)
</script>

API

Component huitr-timeline

组件原理使用 transition 原生组件获得元素的 mount/unmount 事件,并触发 enter 和 leave 指令描述的动画。

timeline 组件之间可以相互嵌套

Props含义
default默认的 GSAP Timeline 配置
leavePosition作为 nested timeline 的 leave 动画的 position 参数
leaveIndex作为 nested timeline 的 leave 动画的 index 参数,表示 timeline step 执行顺序
enterPosition作为 nested timeline 的 enter 动画的 position 参数
enterIndex作为 nested timeline 的 enter 动画的 index 参数,表示 timeline step 执行顺序

Directive v-huitr-enter

用来描述 enter 动画

使用 gsap 的 fromTo

<huitr-timeline :default="{ duration: 0.55 }">
    <div
        v-huitr-enter::-1="{
        from: { opacity: 0 },
        to: { opacity: 1 },
    }"
    ></div>
</huitr-timeline>

使用 gsap 的 to

<huitr-timeline :default="{ duration: 0.55 }">
    <div v-huitr-leave:-e0d5:100="{ opacity: 0, duration: 0.55 }"></div>
</huitr-timeline>

使用函数

<huitr-timeline :default="{ duration: 0.55 }">
    <div
        v-huitr-leave:-e0d5:100="(tl: gsap.core.Timeline, el: Element)=>{ tl.to(el, {opacity: 0}) }"
    ></div>
</huitr-timeline>

Directive v-huitr-leave

用来描述 leave 动画

0.0.20

2 years ago

0.0.21

2 years ago

0.0.22

2 years ago

0.0.23

2 years ago

0.0.24

2 years ago

0.0.25

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.17

2 years ago

0.0.18

2 years ago

0.0.19

2 years ago

0.0.11

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.26

2 years ago

0.0.28

2 years ago

0.0.29

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.5

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago

0.0.0

2 years ago