帮酷LOGO
  • 显示原文与译文双语对照的内容
A Vue.js 2.0 port of Animate.css. For use with Vue's built-in transitions.

  • 源代码名称:vue2-animate
  • 源代码网址:https://github.com/asika32764/vue2-animate
  • vue2-animate源代码文档
  • vue2-animate源代码下载
  • Git URL:
    https://github.com/asika32764/vue2-animate.git
  • Git Clone代码到本地:
    git clone https://github.com/asika32764/vue2-animate
  • Subversion代码到本地:
    $ svn co --depth empty https://github.com/asika32764/vue2-animate
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 用于 Vue.js-2.0的 vue2-animate

    跨浏览器 CSS3动画库

    一个 Vue.jsAnimate.css 端口。 内置的vue转换一起使用。 | 演示插件

    的修改版本为: 用于 Vue 2.0的https://github.com/haydenbbickerton/vue-animate

    安装

    HTML

    包含样式表:

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

    如果你使用 web pack,并使用 css加载程序,你可以使用如下所示的内容:

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

    用法

    如你所愿,使用 Vue.js 转换,但对于转换名称,你将使用Animate.css 动画/出

    例如如果要在元素上使用 fadeInLeft 和 fadeOutLeft,我将写:

    <transition-groupname="fadeLeft"tag="ul">
     <liv-for="item in items"v-bind:key="item">
     {{ item }}
     </li>
    </transition-group>

    输入/离开已经写在样式表中,所以只需从名称中删除 /out golden 。

    自定义转换类

    动画的原始设置输入/离开转换支持css类名。 因此,如果要使用自定义过渡类,可以将 -enter/-leave 添加到类中:

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

    或者使用正则表达式中的常规 syntax语法:

    <transitionname="bounce"enter-active-class="bounceInLeft"leave-active-class="bounceOutRight">
     <pv-if="show">hello</p>
    </transition>
    支持动画

    目前并不是所有的 Animate.css 动画都支持。 下面列出了目前 vue2-animate ( aka - 你可以在transition=中放入的东西"x"属性) 中的内容:

    反弹
    • bounce
    • bounceDown
    • bounceLeft
    • bounceRight
    • bounceUp
    淡出
    • fade
    • fadeDown
    • fadeDownBig
    • fadeLeft
    • fadeLeftBig
    • fadeRight
    • fadeRightBig
    • fadeUp
    • fadeUpBig
    旋转
    • rotate
    • rotateDownLeft
    • rotateDownRight
    • rotateUpLeft
    • rotateUpRight
    幻灯片
    • slideDown
    • slideLeft
    • slideRight
    • slideUp
    缩放
    • zoom
    • zoomDown
    • zoomLeft
    • zoomRight
    • zoomUp
    许可证

    欢迎请求:)




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