https://github.com/bradmartin/nativescript-animatecss

NativeScript plugin for Android to mimic Animate.CSS animations on Android views.
https://github.com/bradmartin/nativescript-animatecss

android animatecss css-animations nativescript nativescript-plugin

Last synced: 7 months ago
JSON representation

NativeScript plugin for Android to mimic Animate.CSS animations on Android views.

• Host: GitHub
• URL: https://github.com/bradmartin/nativescript-animatecss
• Owner: bradmartin
• License: apache-2.0
• Created: 2016-02-12T21:32:51.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-04-30T03:23:43.000Z (over 9 years ago)
• Last Synced: 2024-12-23T09:37:39.928Z (11 months ago)
• Topics: android, animatecss, css-animations, nativescript, nativescript-plugin
• Language: JavaScript
• Size: 3.52 MB
• Stars: 10
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![npm](https://img.shields.io/npm/v/nativescript-animatecss.svg)](https://www.npmjs.com/package/nativescript-animatecss)

[![npm](https://img.shields.io/npm/dt/nativescript-animatecss.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-animatecss)

# NativeScript-AnimateCSS 

NativeScript plugin for Android to mimic Animate.CSS animations on Android views.

This plugin uses [AndroidViewAnimations](https://github.com/daimajia/AndroidViewAnimations) by [daimajia](https://github.com/daimajia)

### AnimateCSS Usage 

![TwitterBang](screens/animateCss.gif)

## Installation

`npm install nativescript-animatecss`

## Usage

### XML:

```XML

    

    

  

    

        

            

            

            

            

         

    

```

### JS:

```JS

var animatecss = require("nativescript-animatecss");

function animateIt(args) {

    // get the native android widget for the view

    var nativeView = args.object.android;

    animatecss.animate({ view: nativeView, cssClass: 'Hinge', duration: 600 }).then(function (result) {

        console.log(result);

    }, function (err) {

        console.log(err);

    });

}

exports.animateIt = animateIt;

```

### API

- animate(options) 

 - **view** : native android view

 - **cssClass** : string class name

 - **duration**: int in milliseconds

### Effects

#### Attention

`Flash`, `Pulse`, `RubberBand`, `Shake`, `Swing`, `Wobble`, `Bounce`, `Tada`, `StandUp`, `Wave`

#### Special

`Hinge`, `RollIn`, `RollOut`,`Landing`,`TakingOff`,`DropOut`

#### Bounce

`BounceIn`, `BounceInDown`, `BounceInLeft`, `BounceInRight`, `BounceInUp`

#### Fade

`FadeIn`, `FadeInUp`, `FadeInDown`, `FadeInLeft`, `FadeInRight`

`FadeOut`, `FadeOutDown`, `FadeOutLeft`, `FadeOutRight`, `FadeOutUp`

#### Flip

`FlipInX`, `FlipOutX`, `FlipOutY`

#### Rotate

`RotateIn`, `RotateInDownLeft`, `RotateInDownRight`, `RotateInUpLeft`, `RotateInUpRight`

`RotateOut`, `RotateOutDownLeft`, `RotateOutDownRight`, `RotateOutUpLeft`, `RotateOutUpRight`

#### Slide

`SlideInLeft`, `SlideInRight`, `SlideInUp`, `SlideInDown`

`SlideOutLeft`, `SlideOutRight`, `SlideOutUp`, `SlideOutDown`

#### Zoom

`ZoomIn`, `ZoomInDown`, `ZoomInLeft`, `ZoomInRight`, `ZoomInUp`

`ZoomOut`, `ZoomOutDown`, `ZoomOutLeft`, `ZoomOutRight`, `ZoomOutUp`