Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 2 months ago
JSON representation

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

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`