# vue-gl-transitions

> Vue Gl Transitions

Latest version **0.1.6** (published 2020-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-gl-transitions
pnpm add vue-gl-transitions
yarn add vue-gl-transitions
bun add vue-gl-transitions
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2020-07-01 |
| First published | 2020-07-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 3.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | binbin@mgtv.com |
| Maintainers | binbin1989 |

## Links

- npm: https://www.npmjs.com/package/vue-gl-transitions
- npm.io page: https://npm.io/package/vue-gl-transitions

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [gl-texture2d](https://npm.io/package/gl-texture2d.md) ^2.1.0
- [gl-transition](https://npm.io/package/gl-transition.md) ^1.13.0
- [gl-transitions](https://npm.io/package/gl-transitions.md) ^1.43.0
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.3
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.4.2

## Recent versions

- 0.1.6 (latest) — 2020-07-01
- 0.1.5 — 2020-07-01
- 0.1.4 — 2020-07-01
- 0.1.3 — 2020-07-01
- 0.1.2 — 2020-07-01
- 0.1.1 — 2020-07-01
- 0.1.0 — 2020-07-01

## README

# vue-gl-transitions

## Effect

![cube](https://camo.githubusercontent.com/c42ecc6197b0f51a106fb50723f9bc6d2e1f925c/687474703a2f2f692e696d6775722e636f6d2f74573331704a452e676966)
![crosswarp](https://camo.githubusercontent.com/7e34cd12d5a9afa94f470395b04b0914c978ce01/687474703a2f2f692e696d6775722e636f6d2f555a5a727775552e676966)
![flyeye](https://camo.githubusercontent.com/0456d4ed8753fbce027f1174dc8b22da548eeade/687474703a2f2f692e696d6775722e636f6d2f654974426a33582e676966)

See [gl-transitions](https://www.npmjs.com/package/gl-transitions).

## install

```shell
yarn add vue-gl-transitions
```

### use

```tsx
...
import VueGlTransition from "vue-gl-transitions";

type Source = ImageData | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement
type Name = 
type DefaultParams = { [key: string]: mixed }

@Component({
  components: { VueGlTransition }
})
export default DEMO extends Vue {
  // 过渡绘制的画布
  private canvas: HTMLCanvasElement | null = null;
  // 是否打开 gl-transition 的 debug模式
  private debug = true;
  // gl-transitions 支持的过渡模板名称
  private name: Name = "doorway";
  // gl-transitions 修改过渡模板支持的参数
  private defaultParams = {}
  // 过渡时长
  private duration = 5;
  // 过渡进度 0 ~ duration
  private progress = 0;
  // 过渡 开始资源
  private from: Source = "";
  // 过渡 结束资源
  private to: Source = "/logo.png";
  private width = 360;
  private height = 203;
  private pixelRatio = Number(
    (typeof window === "object" && window.devicePixelRatio) || 1
  );

  get widthPR() {
    const { width, pixelRatio } = this;
    return width * pixelRatio;
  }

  get heightPR() {
    const { height, pixelRatio } = this;
    return height * pixelRatio;
  }

  mounted() {
    this.canvas = this.$refs.glCanvas as HTMLCanvasElement;
    this.from = this.$refs.toVideo as HTMLVideoElement;
  }

  protected render() {
    return (
      <canvas ref="glCanvas" :width=widthPR" :height="heightPR"></canvas>
      <VueGlTransition
        :canvas="canvas"
        :name="name"
        :from="from"
        :to="to"
        :progress.sync="progress"
        :duration="duration"
        :defaultParams="defaultParams"/>
    )
  }
}

```

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