Skip to content

Commit 7fb36a6

Browse files
cchulocchulo
committed
forgot to readd license and readme
1 parent 6aaa1b4 commit 7fb36a6

File tree

2 files changed

+229
-0
lines changed

2 files changed

+229
-0
lines changed

‎LICENSE.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Giovanni Jiayi Hu
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+208
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
# 🌙 ng-animate
2+
3+
[![npm](https://img.shields.io/npm/v/ng-animate.svg)](https://www.npmjs.com/package/ng-animate)
4+
5+
`ng-animate` is a collection of cool, reusable and flexible animations for Angular. It implements all the animations in [animate.css](https://daneden.github.io/animate.css/), but with the power and flexibility of [Angular animations](https://angular.io/guide/animations) instead of CSS.
6+
7+
> **Note**: the library requires Angular 4.2+, which introduced [different new animation APIs](http://angularjs.blogspot.it/2017/06/angular-42-now-available.html) needed by `ng-animate`.
8+
9+
## Demo
10+
11+
The demo of the animations is available at [https://jiayihu.github.io/ng-animate/](https://jiayihu.github.io/ng-animate/).
12+
13+
## Usage
14+
15+
```
16+
npm install ng-animate --save
17+
```
18+
19+
## Example
20+
21+
Import the animation from the package and pass it to your Angular component using [useAnimation](https://angular.io/api/animations/useAnimation):
22+
23+
```javascript
24+
// my-component.component.ts
25+
import { trigger, transition, useAnimation } from '@angular/animations';
26+
import { bounce } from 'ng-animate';
27+
28+
@Component({
29+
selector: 'my-component',
30+
templateUrl: 'my-component.component.html',
31+
animations: [
32+
trigger('bounce', [transition('* => *', useAnimation(bounce))])
33+
],
34+
})
35+
export class MyComponent {
36+
bounce: any;
37+
}
38+
```
39+
40+
```html
41+
<!-- my-component.component.html -->
42+
<div [@bounce]="bounce"></div>
43+
```
44+
45+
**Note**: Make sure to have included `BrowserAnimationsModule` in your `AppModule` and the [web-animation.js](https://github.com/web-animations/web-animations-js) polyfill.
46+
47+
It's also possible to import only a subset of the animations:
48+
49+
```javascript
50+
import { bounce } from 'ng-animate/lib/bouncing';
51+
```
52+
53+
### Animation params
54+
55+
**All the animations** provided by `ng-animate` support at least two **optional** params `timing` and `delay` to specify the animation duration and delay. Default value for `timing` is usually `1`s and `0`s for `delay`.
56+
You can pass the `params` object using the Javascript API or within the component template:
57+
58+
```javascript
59+
@Component({
60+
selector: 'my-component',
61+
templateUrl: 'my-component.component.html',
62+
animations: [
63+
trigger('bounce', [transition('* => *', useAnimation(bounce, {
64+
// Set the duration to 5seconds and delay to 2seconds
65+
params: { timing: 5, delay: 2 }
66+
}))])
67+
],
68+
})
69+
export class MyComponent {}
70+
```
71+
72+
Using a template can achieve the same result, but you'll have access to the component context:
73+
74+
```html
75+
<div [@bounce]="{ value: bounce, params: { timing: myTiming || 5, delay: myDelay || 2 } }"></div>
76+
```
77+
78+
## Animations
79+
80+
All the animations are organized by their group. Many of them have additional params other than `timing/delay`: refer to [Advanced Usage](#advanced-params) for more details. Nevertheless you can probably ignore them if you're happy with how they are by default.
81+
82+
### Attention seekers
83+
84+
- `bounce`
85+
- `flash`
86+
- `pulse`
87+
- `rubberBand`
88+
- `shake`
89+
- `swing`
90+
- `tada`
91+
- `wobble`
92+
- `jello`
93+
94+
### Bouncing
95+
96+
- `bounceIn`
97+
- `bouceOut`. Additional param: `scale`
98+
99+
The following bouncing animations have additional params `a, b, c, d` for `translate`
100+
101+
- `bounceInDown`
102+
- `bounceInLeft`
103+
- `bounceInRight`
104+
- `bounceInUp`
105+
- `bounceOutDown`
106+
- `bounceOutLeft`
107+
- `bounceOutRight`
108+
- `bounceOutUp`
109+
110+
### Fading
111+
112+
All fading animations have additional params `fromOpacity, toOpacity` for `opacity` transition and `a, b` for `translate`.
113+
114+
- `fadeIn`
115+
- `fadeInDown`
116+
- `fadeInLeft`
117+
- `fadeInRight`
118+
- `fadeInUp`
119+
- `fadeOut`
120+
- `fadeOutDown`
121+
- `fadeOutLeft`
122+
- `fadeOutRight`
123+
- `fadeOutUp`
124+
125+
### Sliding
126+
127+
Sliding animations are basically fading animations without a change of `opacity`. They can also receive the same params.
128+
129+
- `slideInDown`
130+
- `slideInLeft`
131+
- `slideInRight`
132+
- `slideInUp`
133+
- `slideOutDown`
134+
- `slideOutLeft`
135+
- `slideOutRight`
136+
- `slideOutUp`
137+
138+
### Flippers
139+
140+
- `flip`
141+
- `flipInX`
142+
- `flipInY`
143+
- `flipOutX`
144+
- `flipOutY`
145+
146+
### LightSpeed
147+
148+
- `lightSpeedIn`
149+
- `lightSpeedOut`
150+
151+
### Rotating
152+
153+
All rotating animations have additional params `fromOpacity, toOpacity` for `opacity` transition, `origin` for `transform-origin` and `degrees` for `rotate3d`.
154+
155+
- `rotateIn`
156+
- `rotateInDownLeft`
157+
- `rotateInDownRight`
158+
- `rotateInUpLeft`
159+
- `rotateInUpRight`
160+
- `rotateOut`
161+
- `rotateOutDownLeft`
162+
- `rotateOutDownRight`
163+
- `rotateOutUpLeft`
164+
- `rotateOutUpRight`
165+
166+
### Specials
167+
168+
- `jackInTheBox`
169+
- `hinge`
170+
- `rollIn`
171+
- `rollOut`
172+
173+
### Zooming
174+
175+
- `zoomIn`
176+
- `zoomOut`
177+
178+
The following zooming animations have additional params `a, b` for `translate`
179+
180+
- `zoomInDown`
181+
- `zoomInLeft`
182+
- `zoomInRight`
183+
- `zoomInUp`
184+
- `zoomOutDown`
185+
- `zoomOutLeft`
186+
- `zoomOutRight`
187+
- `zoomOutUp`
188+
189+
## Advanced params
190+
191+
Many of the animations support also other params like `scale`, `fromOpacity`, `toOpacity` and much more, allowing extremely flexible usage and customisation if you're not happy with default values.
192+
193+
Single letters like `a, b, c, d` are used for the steps of some animations: `a` is the starting value, `d` is the ending.
194+
The animated property they refer to depends on the animation and the direction: usually `translate` on axis Y from `-Down/-Up`, axis X for `-Left/-Right`.
195+
196+
```javascript
197+
useAnimation(bounceInDown, {
198+
params: {
199+
timing: 5,
200+
201+
// Specify granular values for `translate` on axis Y during 'bounceInDown'
202+
a: '-3000px',
203+
b: '25px',
204+
c: '-10px',
205+
d: '5px',
206+
}
207+
})
208+
```

0 commit comments

Comments
 (0)