Have ideas to improve npm?Join in the discussion! »

    vue2-animate

    2.1.4 • Public • Published

    vue2-animate for Vue.js 2

    Cross-browser CSS3 animation library

    Version License

    A Vue.js port of Animate.css. For use with Vue's built-in transitions. | DEMO

    Credit

    I'm just project maintainer, any changes or request please open a Pull-Request.

    Table of Content

    Installation

    HTML

    Include the stylesheet:

    <head>
    <link rel="stylesheet" href="vue2-animate.min.css">
    </head>

    Include by CDN:

    <link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/>

    NPM / Yarn

    If you're on webpack and using the css-loader, you can use something like this:

    npm install --save vue2-animate
     
    # OR 
     
    yarn add vue2-animate
    require('vue2-animate/dist/vue2-animate.min.css')

    SASS/SCSS

    $animationDuration: 0.5s; // specify animation duration. Default value: 1s 
    @import "<PATH_TO_SOURCE>/src/sass/vue2-animate.scss";

    Less

    @import "<PATH_TO_SOURCE>/src/less/vue2-animate.less";

    NOTE LESS version is deprecated and no-longer maintained. Use SCSS version for your new project.

    Building

    git clone https://github.com/asika32764/vue2-animate.git
    cd vue2-animate
    npm install
    npm run build #Compiled .css files go to the dist folder. 

    You are able to build LESS version with command npm run build:less.

    Usage

    Use Vue.js transitions as you normally would, but for the transition name you will use one of Animate.css animations removing the In/Out from the name.

    For example, if I want to use fadeInLeft and fadeOutLeft on my element, I'll write:

    <transition-group name="fadeLeft" tag="ul">
        <li v-for="item in items" :key="item.id">
            {{ item }}
        </li>
    </transition-group>

    enter/leave is already written in the stylesheet, so just remove In/Out from the name and you're golden.

    Custom Transition Classes

    Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use Custom Transition Classes, you can either add -enter/-leave to the classes:

    <transition
      name="custom-classes-transition"
      enter-active-class="bounceLeft-enter"
      leave-active-class="bounceRight-leave"
    >
      <p v-if="show">hello</p>
    </transition>

    Or use the regular In/Out syntax:

    <transition
      name="bounce"
      enter-active-class="bounceInLeft"
      leave-active-class="bounceOutRight"
    >
      <p v-if="show">hello</p>
    </transition>

    Custom Animation Duration

    <transition name="fade">
      <p v-if="show" style="animation-duration: 0.3s">hello</p>
    </transition>

    Slide like Mobile

    The view element must set position as absolute.

    <transition
        enter-active-class="animated slideInRight"
        leave-active-class="animated slideOutLeft">
        <router-view appear :key="path"></router-view>
    </transition>
    

    Supported Animations

    Not all Animate.css animations are supported at the moment. Here is a list of what's in vue2-animate (aka - what you can put in the transition="x" attribute) as of right now:

    Bounce

    • bounce
    • bounceDown
    • bounceLeft
    • bounceRight
    • bounceUp

    Fade

    • fade
    • fadeDown
    • fadeDownBig
    • fadeLeft
    • fadeLeftBig
    • fadeRight
    • fadeRightBig
    • fadeUp
    • fadeUpBig

    Flip

    • flip
    • flipX
    • flipY

    Rotate

    • rotate
    • rotateDownLeft
    • rotateDownRight
    • rotateUpLeft
    • rotateUpRight

    Slide

    • slideDown
    • slideLeft
    • slideRight
    • slideUp

    Zoom

    • zoom
    • zoomDown
    • zoomLeft
    • zoomRight
    • zoomUp

    LightSpeed

    • lightSpeed

    License

    MIT

    Install

    npm i vue2-animate

    DownloadsWeekly Downloads

    8,174

    Version

    2.1.4

    License

    MIT

    Unpacked Size

    173 kB

    Total Files

    91

    Last publish

    Collaborators

    • avatar