帮酷LOGO

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

Animate.css的Vue.js 2.0端口 在转换中,与生成的Vue一起使用

将光标移到/点击文章中的句子上,可以查看译文。 显示原文      显示译文      双语对照

  • 显示内容
A Vue.js 2.0 port of Animate.css. For use with Vue's built-in transitions.

  • Source Code:vue2-animate
  • WebSite:https:/github.com/asika32764/vue2-animate
  • vue2-animate Documents
  • vue2-animate Download
  • vue2-animate for Vue.js 2.0

    Cross-browser CSS3 animation library

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

    this is modified version of :https://github.com/haydenbbickerton/vue-animate for Vue 2.0

    Installation

    HTML

    Include the stylesheet :

    <head>
     <linkrel="stylesheet"href="vue2-animate.min.css">
    </head>
    npm

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

    npm install --save vue2-animate
    require('vue2-animate/dist/vue2-animate.min.css')
    Less
    @import"<PATH_TO_SOURCE>/src/vue2-animate.less";
    Building
    git clone https://github.com/asika32764/vue2-animate.gitcd vue2-animate
    npm install
    npm run build #Compiled. css files go to the dist folder

    Usage

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

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

    <transition-groupname="fadeLeft"tag="ul">
     <liv-for="item in items"v-bind:key="item">
     {{ 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 :

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

    Or use the regular In/Out syntax :

    <transitionname="bounce"enter-active-class="bounceInLeft"leave-active-class="bounceOutRight">
     <pv-if="show">hello</p>
    </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
    Rotate
    • rotate
    • rotateDownLeft
    • rotateDownRight
    • rotateUpLeft
    • rotateUpRight
    Slide
    • slideDown
    • slideLeft
    • slideRight
    • slideUp
    Zoom
    • zoom
    • zoomDown
    • zoomLeft
    • zoomRight
    • zoomUp
    License

    MIT

    Contributing

    Pull requests are welcome : )




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语