# @anfo/huitr

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

Latest version **0.0.29** (published 2023-09-16) · 0 weekly downloads

## Install

```sh
npm install @anfo/huitr
pnpm add @anfo/huitr
yarn add @anfo/huitr
bun add @anfo/huitr
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.29 |
| Published | 2023-09-16 |
| First published | 2023-05-11 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 20 |
| Unpacked size | 351.3 KB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | longjiahui |

## Links

- npm: https://www.npmjs.com/package/@anfo/huitr
- npm.io page: https://npm.io/package/@anfo/huitr

## Dependencies (20)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [gsap](https://npm.io/package/gsap.md) ^3.11.5
- [sass](https://npm.io/package/sass.md) ^1.61.0
- [vite](https://npm.io/package/vite.md) ^4.2.0
- [pinia](https://npm.io/package/pinia.md) ^2.0.34
- [events](https://npm.io/package/events.md) ^3.3.0
- [shortid](https://npm.io/package/shortid.md) ^2.2.16
- [vue-tsc](https://npm.io/package/vue-tsc.md) ^1.2.0
- [typescript](https://npm.io/package/typescript.md) ^5.0.4
- [vue-router](https://npm.io/package/vue-router.md) ^4.1.6
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^3.3.1
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^10.1.2
- [@types/shortid](https://npm.io/package/@types/shortid.md) ^0.0.29
- [@vueuse/router](https://npm.io/package/@vueuse/router.md) ^10.1.2
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^5.0.0
- [@vitejs/plugin-vue](https://npm.io/package/@vitejs/plugin-vue.md) ^4.1.0
- [@vueuse/components](https://npm.io/package/@vueuse/components.md) ^10.1.2
- [@vitejs/plugin-vue-jsx](https://npm.io/package/@vitejs/plugin-vue-jsx.md) ^3.0.1
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) ^0.5.1
- [@types/throttle-debounce](https://npm.io/package/@types/throttle-debounce.md) ^5.0.0

## Recent versions

- 0.0.29 (latest) — 2023-09-16
- 0.0.28 — 2023-09-16
- 0.0.26 — 2023-09-16
- 0.0.25 — 2023-09-16
- 0.0.24 — 2023-09-16
- 0.0.23 — 2023-09-16
- 0.0.22 — 2023-09-10
- 0.0.21 — 2023-09-09
- 0.0.20 — 2023-09-09
- 0.0.19 — 2023-09-09
- 0.0.18 — 2023-09-09
- 0.0.17 — 2023-09-09
- 0.0.16 — 2023-09-09
- 0.0.15 — 2023-09-09
- 0.0.14 — 2023-09-08
- … 13 more at https://npm.io/package/@anfo/huitr/versions

## README

# HUITR 概览

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

# 快速使用

## Install

```bash
npm i @anfo/huitr
```

## Usage

```ts
// 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')
```

```html
<!-- 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

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

### 使用 gsap 的 to

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

### 使用函数

```html
<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 动画

---
_Source: https://npm.io/package/@anfo/huitr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._