Nero Punished Miscreants

    vuenime

    1.0.3 • Public • Published

    Vuenime

    A flexible Vue wrapper for Animejs

    npm install vuenime
    # or 
    yarn add vuenime

    Storybook | CodeSandbox

    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.

    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

    Install

    npm i vuenime

    DownloadsWeekly Downloads

    5

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    21.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • denis-invader