Coder Social home page Coder Social logo

actingcute / vue2-animate Goto Github PK

View Code? Open in Web Editor NEW

This project forked from asika32764/vue-animate

0.0 0.0 0.0 85 KB

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

Home Page: https://the-allstars.com/vue2-animate/

License: MIT License

JavaScript 4.72% CSS 95.28%

vue2-animate's Introduction

vue2-animate for Vue.js 2.0

Cross-browser CSS3 animation library

Version License

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

Thanks @pavels-hyuna for his SCSS version work.

Installation

HTML

Include the stylesheet:

<head>
  <link rel="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')

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" 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:

<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>

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 :)

vue2-animate's People

Contributors

asika32764 avatar haydenbbickerton avatar pavelsavushkinmix avatar rvanzon avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.