# @mxnet/imagetransition

> image,vue,typescript,transition

Latest version **0.1.4** (published 2022-09-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mxnet/imagetransition
pnpm add @mxnet/imagetransition
yarn add @mxnet/imagetransition
bun add @mxnet/imagetransition
```

## 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.1.4 |
| Published | 2022-09-25 |
| First published | 2022-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hooks_28 |
| Maintainers | hooks_28 |
| Keywords | image, vue, typescript, transition |

## Links

- npm: https://www.npmjs.com/package/@mxnet/imagetransition
- Repository: https://gitee.com/cq_maixun_network/repo
- npm.io page: https://npm.io/package/@mxnet/imagetransition

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2022-09-25
- 0.1.3 — 2022-09-17
- 0.1.2 — 2022-09-17

## README

<!--
 * @Author: 邱狮杰
 * @Date: 2022-09-12 22:09:41
 * @LastEditTime: 2022-09-17 14:34:39
 * @Description:
 * @FilePath: /repo/packages/imageTransition/README.md
-->

# `@mxnet/imageTransition`

> 图片过渡动画，启发来自 [你的图片加载，一点都不酷炫！不信 You Look Look...](https://juejin.cn/post/7122256732940107813)

## Usage

```ts
import { ImageTransitionAnimationPlugin } from "@mxnet/imagetransition";

import { createApp } from "vue";

const app = createApp(App);
// 注册全局组件 ImgWrapper 和 imgTs 指令
app.use(ImageTransitionAnimationPlugin);
```

```html
<img src="" v-imgTs="{def: src}" />
```

```html
<!-- src 预加载图片 classNames 注意s  def 占位图 -->
<ImgWrapper src="" classNames="" def="" />
```

## Principle

该指令会生成一个 `img` 元素在 指令元素后方

并且替换当前元素 `src` 为 默认占位图片`(def)`

这时会立即去请求真实的图片资源

请求回来后会将当前元素隐藏

显示真实图片资源

期间会有一系列钩子调用

来完成这个过渡动画

## Precautions

- 被指令标记的 `img` 元素必须是一个脱离文档流的元素

- 必须搭配 `vite-plugin-img-reload` 使用

- 只在 `img` 标签才生效

- `options`

```ts
interface ImageTransitionAnimationOptions {
  // 默认占位图片
  def: string;
}
```

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