vue 安装animejs_适用于Animejs的灵活Vue包装器

vue 安装animejs

威尼姆 (Vuenime)

A flexible Vue wrapper for Animejs.

适用于Animejs的灵活Vue包装器。

npm install vuenime
# or
yarn add vuenime

View demo 查看演示 View Github 查看Github

用法 (Usage)

In a component:

在组件中：

<template>
  <div>
    <p>
      <label for="countInput">Value:</label>
      <input
        id="countInput"
        v-model.lazy="count"
        type="number"
        min="0"
      >
    </p>

    <vuenime
      :value="count"
      duration="1500"
      v-slot="theCount"
    >
      <div>
        <code>Width: {{theCount}}px</code>
        <div
          :style="{
            backgroundColor: 'green',
            width: `${theCount}px`,
          }"
        />
      </div>
    </vuenime>
  </div>
</template>

<script>
import { Vuenime } from 'vuenime';

export default {
  components: { Vuenime },
  data () {
    return {
      count: 42,
    };
  },
};
</script>

Global registration:

全球注册：

import Vue from 'vue';
import Vuenime from 'vuenime';

Vue.use(Vuenime);

道具 (Props)

Name	Type	Required
value	Number | String | Array | Object	yes	The animation target
render	Function	no	Render function. Use this prop to avoid scoped slots definition in JSX.

名称	类型	需要
value	Number String | Array | Object	是	动画目标
render	Function	没有	渲染功能。 使用此道具可避免在JSX中定义作用域插槽。

动画参数 (Animation parameters)

Cover Anime property and animation parameters.

涵盖动漫属性和动画参数。

Name	Type	Default
duration	Number	1000
delay	Number	0
endDelay	Number	0
easing	String	"easeOutElastic(1, .5)"
round	Number	0
direction	String	"normal"
loop	Number | Boolean	false

名称	类型	默认
duration	Number	1000
delay	Number	0
endDelay	Number	0
easing	String	"easeOutElastic(1, .5)"
round	Number	0
direction	String	"normal"
loop	Number Boolean	false

翻译自: https://vuejsexamples.com/a-flexible-vue-wrapper-for-animejs/

vue 安装animejs