├── .editorconfig
├── .gitignore
├── LICENSE.md
├── README.md
├── favicon.ico
├── index.html
├── main.js
├── normalize.css
├── package-lock.json
├── package.json
├── src
    ├── attention-seekers.ts
    ├── bouncing.ts
    ├── fading.ts
    ├── flippers.ts
    ├── index.ts
    ├── lightspeed.ts
    ├── rotate.ts
    ├── specials.ts
    ├── utils.ts
    └── zooming.ts
├── tsconfig-prod.json
├── tsconfig.json
├── tslint.json
└── webpack.config.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | bower_components
 2 | node_modules
 3 | 
 4 | demo-dist
 5 | lib
 6 | demo
 7 | 
 8 | # Editor configs
 9 | .idea
10 | .vscode
11 | 
12 | # Compiled source #
13 | ###################
14 | *.com
15 | *.class
16 | *.dll
17 | *.exe
18 | *.o
19 | *.so
20 | 
21 | # Packages #
22 | ############
23 | # it's better to unpack these files and commit the raw source
24 | # git has its own built in compression methods
25 | *.7z
26 | *.dmg
27 | *.gz
28 | *.iso
29 | *.jar
30 | *.rar
31 | *.tar
32 | *.zip
33 | *.tgz
34 | 
35 | # Logs and databases #
36 | ######################
37 | *.log
38 | *.sql
39 | *.sqlite
40 | 
41 | # OS generated files #
42 | ######################
43 | .DS_Store
44 | .DS_Store?
45 | ._*
46 | .Spotlight-V100
47 | .Trashes
48 | ehthumbs.db
49 | Thumbs.db
50 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 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.
22 | 


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


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mygu/ngx-animate/e75be92337b658ff013814ccec4f4fbec30631b8/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>ngx-animate</title>
 5 |     <link rel="icon" href="favicon.ico?v=2"/>
 6 |     <base href=".">
 7 |     <meta charset="UTF-8">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" type="text/css" href="normalize.css">
10 |     <style>
11 |       body {
12 |         background: #3494e6;
13 |         background: linear-gradient(to right, #3494e6, #ec6ead);
14 |         color: #fff;
15 |         font-family: 'helvetica neue', helvetica, sans-serif;
16 |         font-size: 15px;
17 |         margin: 0;
18 |         padding-bottom: 4rem;
19 |       }
20 | 
21 |       @-webkit-keyframes square-spin {
22 |       25% {
23 |         -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
24 |                 transform: perspective(100px) rotateX(180deg) rotateY(0); }
25 |       50% {
26 |         -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
27 |                 transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
28 |       75% {
29 |         -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
30 |                 transform: perspective(100px) rotateX(0) rotateY(180deg); }
31 |       100% {
32 |         -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
33 |                 transform: perspective(100px) rotateX(0) rotateY(0); } }
34 | 
35 |       @keyframes square-spin {
36 |       25% {
37 |         -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
38 |                 transform: perspective(100px) rotateX(180deg) rotateY(0); }
39 |       50% {
40 |         -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
41 |                 transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
42 |       75% {
43 |         -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
44 |                 transform: perspective(100px) rotateX(0) rotateY(180deg); }
45 |       100% {
46 |         -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
47 |                 transform: perspective(100px) rotateX(0) rotateY(0); } }
48 | 
49 |       .square-spin > div {
50 |       -webkit-animation-fill-mode: both;
51 |               animation-fill-mode: both;
52 |       width: 50px;
53 |       height: 50px;
54 |       background: #fff;
55 |       position: absolute;
56 |       left: 50%;
57 |       top: 50%;
58 |       transform: translate3d(-50%, -50%, 0);
59 |       -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
60 |               animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }
61 |     </style>
62 |   </head>
63 |   <body>
64 |     <a href="https://github.com/mygu/ngx-animate" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
65 |     <demo-app>
66 |       <div class="square-spin">
67 |         <div></div>
68 |       </div>
69 |     </demo-app>
70 |     <script src="main.js" charset="utf-8"></script>
71 |   </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | html {
 13 |   line-height: 1.15; /* 1 */
 14 |   -ms-text-size-adjust: 100%; /* 2 */
 15 |   -webkit-text-size-adjust: 100%; /* 2 */
 16 | }
 17 | 
 18 | /* Sections
 19 |    ========================================================================== */
 20 | 
 21 | /**
 22 |  * Remove the margin in all browsers (opinionated).
 23 |  */
 24 | 
 25 | body {
 26 |   margin: 0;
 27 | }
 28 | 
 29 | /**
 30 |  * Add the correct display in IE 9-.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | footer,
 36 | header,
 37 | nav,
 38 | section {
 39 |   display: block;
 40 | }
 41 | 
 42 | /**
 43 |  * Correct the font size and margin on `h1` elements within `section` and
 44 |  * `article` contexts in Chrome, Firefox, and Safari.
 45 |  */
 46 | 
 47 | h1 {
 48 |   font-size: 2em;
 49 |   margin: 0.67em 0;
 50 | }
 51 | 
 52 | /* Grouping content
 53 |    ========================================================================== */
 54 | 
 55 | /**
 56 |  * Add the correct display in IE 9-.
 57 |  * 1. Add the correct display in IE.
 58 |  */
 59 | 
 60 | figcaption,
 61 | figure,
 62 | main {
 63 |   /* 1 */
 64 |   display: block;
 65 | }
 66 | 
 67 | /**
 68 |  * Add the correct margin in IE 8.
 69 |  */
 70 | 
 71 | figure {
 72 |   margin: 1em 40px;
 73 | }
 74 | 
 75 | /**
 76 |  * 1. Add the correct box sizing in Firefox.
 77 |  * 2. Show the overflow in Edge and IE.
 78 |  */
 79 | 
 80 | hr {
 81 |   box-sizing: content-box; /* 1 */
 82 |   height: 0; /* 1 */
 83 |   overflow: visible; /* 2 */
 84 | }
 85 | 
 86 | /**
 87 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 88 |  * 2. Correct the odd `em` font sizing in all browsers.
 89 |  */
 90 | 
 91 | pre {
 92 |   font-family: monospace, monospace; /* 1 */
 93 |   font-size: 1em; /* 2 */
 94 | }
 95 | 
 96 | /* Text-level semantics
 97 |    ========================================================================== */
 98 | 
 99 | /**
100 |  * 1. Remove the gray background on active links in IE 10.
101 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
102 |  */
103 | 
104 | a {
105 |   background-color: transparent; /* 1 */
106 |   -webkit-text-decoration-skip: objects; /* 2 */
107 | }
108 | 
109 | /**
110 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
111 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
112 |  */
113 | 
114 | abbr[title] {
115 |   border-bottom: none; /* 1 */
116 |   text-decoration: underline; /* 2 */
117 |   text-decoration: underline dotted; /* 2 */
118 | }
119 | 
120 | /**
121 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
122 |  */
123 | 
124 | b,
125 | strong {
126 |   font-weight: inherit;
127 | }
128 | 
129 | /**
130 |  * Add the correct font weight in Chrome, Edge, and Safari.
131 |  */
132 | 
133 | b,
134 | strong {
135 |   font-weight: bolder;
136 | }
137 | 
138 | /**
139 |  * 1. Correct the inheritance and scaling of font size in all browsers.
140 |  * 2. Correct the odd `em` font sizing in all browsers.
141 |  */
142 | 
143 | code,
144 | kbd,
145 | samp {
146 |   font-family: monospace, monospace; /* 1 */
147 |   font-size: 1em; /* 2 */
148 | }
149 | 
150 | /**
151 |  * Add the correct font style in Android 4.3-.
152 |  */
153 | 
154 | dfn {
155 |   font-style: italic;
156 | }
157 | 
158 | /**
159 |  * Add the correct background and color in IE 9-.
160 |  */
161 | 
162 | mark {
163 |   background-color: #ff0;
164 |   color: #000;
165 | }
166 | 
167 | /**
168 |  * Add the correct font size in all browsers.
169 |  */
170 | 
171 | small {
172 |   font-size: 80%;
173 | }
174 | 
175 | /**
176 |  * Prevent `sub` and `sup` elements from affecting the line height in
177 |  * all browsers.
178 |  */
179 | 
180 | sub,
181 | sup {
182 |   font-size: 75%;
183 |   line-height: 0;
184 |   position: relative;
185 |   vertical-align: baseline;
186 | }
187 | 
188 | sub {
189 |   bottom: -0.25em;
190 | }
191 | 
192 | sup {
193 |   top: -0.5em;
194 | }
195 | 
196 | /* Embedded content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Add the correct display in IE 9-.
201 |  */
202 | 
203 | audio,
204 | video {
205 |   display: inline-block;
206 | }
207 | 
208 | /**
209 |  * Add the correct display in iOS 4-7.
210 |  */
211 | 
212 | audio:not([controls]) {
213 |   display: none;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Remove the border on images inside links in IE 10-.
219 |  */
220 | 
221 | img {
222 |   border-style: none;
223 | }
224 | 
225 | /**
226 |  * Hide the overflow in IE.
227 |  */
228 | 
229 | svg:not(:root) {
230 |   overflow: hidden;
231 | }
232 | 
233 | /* Forms
234 |    ========================================================================== */
235 | 
236 | /**
237 |  * 1. Change the font styles in all browsers (opinionated).
238 |  * 2. Remove the margin in Firefox and Safari.
239 |  */
240 | 
241 | button,
242 | input,
243 | optgroup,
244 | select,
245 | textarea {
246 |   font-family: sans-serif; /* 1 */
247 |   font-size: 100%; /* 1 */
248 |   line-height: 1.15; /* 1 */
249 |   margin: 0; /* 2 */
250 | }
251 | 
252 | /**
253 |  * Show the overflow in IE.
254 |  * 1. Show the overflow in Edge.
255 |  */
256 | 
257 | button,
258 | input {
259 |   /* 1 */
260 |   overflow: visible;
261 | }
262 | 
263 | /**
264 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
265 |  * 1. Remove the inheritance of text transform in Firefox.
266 |  */
267 | 
268 | button,
269 | select {
270 |   /* 1 */
271 |   text-transform: none;
272 | }
273 | 
274 | /**
275 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
276 |  *    controls in Android 4.
277 |  * 2. Correct the inability to style clickable types in iOS and Safari.
278 |  */
279 | 
280 | button,
281 | html [type="button"],
282 | /* 1 */
283 | [type="reset"],
284 | [type="submit"] {
285 |   -webkit-appearance: button; /* 2 */
286 | }
287 | 
288 | /**
289 |  * Remove the inner border and padding in Firefox.
290 |  */
291 | 
292 | button::-moz-focus-inner,
293 | [type="button"]::-moz-focus-inner,
294 | [type="reset"]::-moz-focus-inner,
295 | [type="submit"]::-moz-focus-inner {
296 |   border-style: none;
297 |   padding: 0;
298 | }
299 | 
300 | /**
301 |  * Restore the focus styles unset by the previous rule.
302 |  */
303 | 
304 | button:-moz-focusring,
305 | [type="button"]:-moz-focusring,
306 | [type="reset"]:-moz-focusring,
307 | [type="submit"]:-moz-focusring {
308 |   outline: 1px dotted ButtonText;
309 | }
310 | 
311 | /**
312 |  * Correct the padding in Firefox.
313 |  */
314 | 
315 | fieldset {
316 |   padding: 0.35em 0.75em 0.625em;
317 | }
318 | 
319 | /**
320 |  * 1. Correct the text wrapping in Edge and IE.
321 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
322 |  * 3. Remove the padding so developers are not caught out when they zero out
323 |  *    `fieldset` elements in all browsers.
324 |  */
325 | 
326 | legend {
327 |   box-sizing: border-box; /* 1 */
328 |   color: inherit; /* 2 */
329 |   display: table; /* 1 */
330 |   max-width: 100%; /* 1 */
331 |   padding: 0; /* 3 */
332 |   white-space: normal; /* 1 */
333 | }
334 | 
335 | /**
336 |  * 1. Add the correct display in IE 9-.
337 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
338 |  */
339 | 
340 | progress {
341 |   display: inline-block; /* 1 */
342 |   vertical-align: baseline; /* 2 */
343 | }
344 | 
345 | /**
346 |  * Remove the default vertical scrollbar in IE.
347 |  */
348 | 
349 | textarea {
350 |   overflow: auto;
351 | }
352 | 
353 | /**
354 |  * 1. Add the correct box sizing in IE 10-.
355 |  * 2. Remove the padding in IE 10-.
356 |  */
357 | 
358 | [type="checkbox"],
359 | [type="radio"] {
360 |   box-sizing: border-box; /* 1 */
361 |   padding: 0; /* 2 */
362 | }
363 | 
364 | /**
365 |  * Correct the cursor style of increment and decrement buttons in Chrome.
366 |  */
367 | 
368 | [type="number"]::-webkit-inner-spin-button,
369 | [type="number"]::-webkit-outer-spin-button {
370 |   height: auto;
371 | }
372 | 
373 | /**
374 |  * 1. Correct the odd appearance in Chrome and Safari.
375 |  * 2. Correct the outline style in Safari.
376 |  */
377 | 
378 | [type="search"] {
379 |   -webkit-appearance: textfield; /* 1 */
380 |   outline-offset: -2px; /* 2 */
381 | }
382 | 
383 | /**
384 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
385 |  */
386 | 
387 | [type="search"]::-webkit-search-cancel-button,
388 | [type="search"]::-webkit-search-decoration {
389 |   -webkit-appearance: none;
390 | }
391 | 
392 | /**
393 |  * 1. Correct the inability to style clickable types in iOS and Safari.
394 |  * 2. Change font properties to `inherit` in Safari.
395 |  */
396 | 
397 | ::-webkit-file-upload-button {
398 |   -webkit-appearance: button; /* 1 */
399 |   font: inherit; /* 2 */
400 | }
401 | 
402 | /* Interactive
403 |    ========================================================================== */
404 | 
405 | /*
406 |  * Add the correct display in IE 9-.
407 |  * 1. Add the correct display in Edge, IE, and Firefox.
408 |  */
409 | 
410 | details,
411 | /* 1 */
412 | menu {
413 |   display: block;
414 | }
415 | 
416 | /*
417 |  * Add the correct display in all browsers.
418 |  */
419 | 
420 | summary {
421 |   display: list-item;
422 | }
423 | 
424 | /* Scripting
425 |    ========================================================================== */
426 | 
427 | /**
428 |  * Add the correct display in IE 9-.
429 |  */
430 | 
431 | canvas {
432 |   display: inline-block;
433 | }
434 | 
435 | /**
436 |  * Add the correct display in IE.
437 |  */
438 | 
439 | template {
440 |   display: none;
441 | }
442 | 
443 | /* Hidden
444 |    ========================================================================== */
445 | 
446 | /**
447 |  * Add the correct display in IE 10-.
448 |  */
449 | 
450 | [hidden] {
451 |   display: none;
452 | }
453 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-animate",
 3 |   "version": "1.0.1",
 4 |   "description": "A very cool Angular animation library.",
 5 |   "main": "lib/index.js",
 6 |   "files": [
 7 |     "lib"
 8 |   ],
 9 |   "scripts": {
10 |     "build": "npm run clean && ngc -p tsconfig-prod.json",
11 |     "build:demo": "rimraf demo-dist && cross-env NODE_ENV=production webpack && cp index.html favicon.ico demo-dist",
12 |     "clean": "rimraf lib",
13 |     "deploy": "gh-pages -d demo-dist",
14 |     "start": "webpack-dev-server --inline",
15 |     "lint": "tslint \"./src/**/*.ts\"",
16 |     "prepush": "npm run lint"
17 |   },
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git+https://github.com/mygu/ngx-animate"
21 |   },
22 |   "keywords": [
23 |     "angular",
24 |     "animations"
25 |   ],
26 |   "author": "Mingyu Gu <mingyugu0410@gmail.com>",
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "https://github.com/mygu/ngx-animate/issues"
30 |   },
31 |   "homepage": "https://github.com/mygu/ngx-animate#readme",
32 |   "devDependencies": {
33 |     "@angular/animations": "^5.0.1",
34 |     "@angular/common": "^5.0.1",
35 |     "@angular/compiler": "^5.0.1",
36 |     "@angular/compiler-cli": "^5.0.1",
37 |     "@angular/core": "^5.0.1",
38 |     "@angular/forms": "^5.0.1",
39 |     "@angular/http": "^5.0.1",
40 |     "@angular/platform-browser": "^5.0.1",
41 |     "@angular/platform-browser-dynamic": "^5.0.1",
42 |     "@angular/platform-server": "^5.0.1",
43 |     "@angular/router": "^5.0.1",
44 |     "@ngtools/webpack": "^1.8.1",
45 |     "@types/node": "^8.0.17",
46 |     "angular2-template-loader": "^0.6.2",
47 |     "codelyzer": "^3.1.2",
48 |     "copy-webpack-plugin": "^4.0.1",
49 |     "core-js": "^2.4.1",
50 |     "cross-env": "^5.0.1",
51 |     "css-loader": "^0.28.4",
52 |     "file-loader": "^0.11.2",
53 |     "gh-pages": "^1.0.0",
54 |     "husky": "^0.14.3",
55 |     "raw-loader": "^0.5.1",
56 |     "reflect-metadata": "^0.1.10",
57 |     "rimraf": "^2.6.1",
58 |     "rxjs": "^5.5.2",
59 |     "ts-loader": "^2.3.2",
60 |     "tslint": "^5.5.0",
61 |     "typescript": "2.4.2",
62 |     "web-animations-js": "^2.3.1",
63 |     "webpack": "^3.4.1",
64 |     "webpack-dev-server": "^2.6.1",
65 |     "zone.js": "^0.8.16"
66 |   },
67 |   "peerDependencies": {
68 |     "@angular/animations": ">=4.2.0 <7.0.0",
69 |     "@angular/core": ">=4.2.0 <7.0.0",
70 |     "web-animations-js": "^2.0.0"
71 |   },
72 |   "directories": {
73 |     "lib": "lib"
74 |   },
75 |   "dependencies": {}
76 | }
77 | 


--------------------------------------------------------------------------------
/src/attention-seekers.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AnimationReferenceMetadata,
  3 |   animation,
  4 |   style,
  5 |   animate,
  6 |   keyframes,
  7 | } from '@angular/animations';
  8 | import { DEFAULT_TIMING } from './utils';
  9 | 
 10 | export const bounce = animation(
 11 |   [
 12 |     style({ transform: 'translate3d(0, 0, 0)' }),
 13 |     animate(
 14 |       '{{ timing }}s {{ delay }}s',
 15 |       keyframes([
 16 |         style({ transform: 'translate3d(0, 0, 0)', offset: 0.2 }),
 17 |         style({ transform: 'translate3d(0, -30px, 0)', offset: 0.4 }),
 18 |         style({ transform: 'translate3d(0, 0, 0)', offset: 0.53 }),
 19 |         style({ transform: 'translate3d(0, -15px, 0)', offset: 0.7 }),
 20 |         style({ transform: 'translate3d(0, -4px, 0)', offset: 0.9 }),
 21 |         style({ transform: 'translate3d(0, 0, 0)', offset: 1 }),
 22 |       ])
 23 |     ),
 24 |   ],
 25 |   { params: { timing: DEFAULT_TIMING, delay: 0 } }
 26 | );
 27 | 
 28 | export const flash = animation(
 29 |   animate(
 30 |     '{{ timing }}s {{ delay }}s',
 31 |     keyframes([
 32 |       style({ opacity: 1 }),
 33 |       style({ opacity: 0 }),
 34 |       style({ opacity: 1 }),
 35 |       style({ opacity: 0 }),
 36 |       style({ opacity: 1 }),
 37 |     ])
 38 |   ),
 39 |   { params: { timing: DEFAULT_TIMING, delay: 0 } }
 40 | );
 41 | 
 42 | export const pulse = animation(
 43 |   animate(
 44 |     '{{ timing }}s {{ delay }}s',
 45 |     keyframes([
 46 |       style({ transform: 'scale3d(1, 1, 1)' }),
 47 |       style({ transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})' }),
 48 |       style({ transform: 'scale3d(1, 1, 1)' }),
 49 |     ])
 50 |   ),
 51 |   { params: { scale: 1.25, timing: DEFAULT_TIMING, delay: 0 } }
 52 | );
 53 | 
 54 | export const rubberBand = animation(
 55 |   animate(
 56 |     '{{ timing }}s {{ delay }}s',
 57 |     keyframes([
 58 |       style({ transform: 'scale3d(1, 1, 1)', offset: 0 }),
 59 |       style({ transform: 'scale3d(1.25, 0.75, 1)', offset: 0.3 }),
 60 |       style({ transform: 'scale3d(0.75, 1.25, 1)', offset: 0.4 }),
 61 |       style({ transform: 'scale3d(1.15, 0.85, 1)', offset: 0.5 }),
 62 |       style({ transform: 'scale3d(.95, 1.05, 1)', offset: 0.65 }),
 63 |       style({ transform: 'scale3d(1.05, .95, 1)', offset: 0.75 }),
 64 |       style({ transform: 'scale3d(1, 1, 1)', offset: 1 }),
 65 |     ])
 66 |   ),
 67 |   { params: { timing: DEFAULT_TIMING, delay: 0 } }
 68 | );
 69 | 
 70 | export const shake = animation(
 71 |   animate(
 72 |     '{{ timing }}s {{ delay }}s',
 73 |     keyframes([
 74 |       style({ transform: 'translate3d(0, 0, 0)', offset: 0 }),
 75 |       style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.1 }),
 76 |       style({ transform: 'translate3d(10px, 0, 0)', offset: 0.2 }),
 77 |       style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.3 }),
 78 |       style({ transform: 'translate3d(10px, 0, 0)', offset: 0.4 }),
 79 |       style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.5 }),
 80 |       style({ transform: 'translate3d(10px, 0, 0)', offset: 0.6 }),
 81 |       style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.7 }),
 82 |       style({ transform: 'translate3d(10px, 0, 0)', offset: 0.8 }),
 83 |       style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.9 }),
 84 |       style({ transform: 'translate3d(0, 0, 0)', offset: 1 }),
 85 |     ])
 86 |   ),
 87 |   { params: { timing: DEFAULT_TIMING, delay: 0 } }
 88 | );
 89 | 
 90 | export const swing = animation(
 91 |   animate(
 92 |     '{{ timing }}s {{ delay }}s',
 93 |     keyframes([
 94 |       style({ transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2 }),
 95 |       style({ transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4 }),
 96 |       style({ transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6 }),
 97 |       style({ transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8 }),
 98 |       style({ transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }),
 99 |     ])
100 |   ),
101 |   { params: { timing: DEFAULT_TIMING, delay: 0 } }
102 | );
103 | 
104 | export const tada = animation(
105 |   animate(
106 |     '{{ timing }}s {{ delay }}s',
107 |     keyframes([
108 |       style({ transform: 'scale3d(1, 1, 1)', offset: 0 }),
109 |       style({
110 |         transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)',
111 |         offset: 0.1,
112 |       }),
113 |       style({
114 |         transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)',
115 |         offset: 0.2,
116 |       }),
117 |       style({
118 |         transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)',
119 |         offset: 0.3,
120 |       }),
121 |       style({
122 |         transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)',
123 |         offset: 0.4,
124 |       }),
125 |       style({
126 |         transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)',
127 |         offset: 0.5,
128 |       }),
129 |       style({
130 |         transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)',
131 |         offset: 0.6,
132 |       }),
133 |       style({
134 |         transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)',
135 |         offset: 0.7,
136 |       }),
137 |       style({
138 |         transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)',
139 |         offset: 0.8,
140 |       }),
141 |       style({
142 |         transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)',
143 |         offset: 0.9,
144 |       }),
145 |       style({ transform: 'scale3d(1, 1, 1)', offset: 1 }),
146 |     ])
147 |   ),
148 |   { params: { timing: DEFAULT_TIMING, delay: 0 } }
149 | );
150 | 
151 | export const wobble = animation(
152 |   animate(
153 |     '{{ timing }}s {{ delay }}s',
154 |     keyframes([
155 |       style({ transform: 'none', offset: 0 }),
156 |       style({
157 |         transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)',
158 |         offset: 0.15,
159 |       }),
160 |       style({
161 |         transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)',
162 |         offset: 0.3,
163 |       }),
164 |       style({
165 |         transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)',
166 |         offset: 0.45,
167 |       }),
168 |       style({
169 |         transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)',
170 |         offset: 0.6,
171 |       }),
172 |       style({
173 |         transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)',
174 |         offset: 0.75,
175 |       }),
176 |       style({ transform: 'none', offset: 1 }),
177 |     ])
178 |   ),
179 |   { params: { timing: DEFAULT_TIMING, delay: 0 } }
180 | );
181 | 
182 | export const jello = animation(
183 |   animate(
184 |     '{{ timing }}s {{ delay }}s',
185 |     keyframes([
186 |       style({ transform: 'none', offset: 0 }),
187 |       style({ transform: 'none', offset: 0.11 }),
188 |       style({ transform: 'skewX(-12.5deg) skewY(-12.5deg)', offset: 0.22 }),
189 |       style({ transform: 'skewX(6.25deg) skewY(6.25deg)', offset: 0.33 }),
190 |       style({ transform: 'skewX(-3.125deg) skewY(-3.125deg)', offset: 0.44 }),
191 |       style({ transform: 'skewX(1.5625deg) skewY(1.5625deg)', offset: 0.55 }),
192 |       style({
193 |         transform: 'skewX(-0.78125deg) skewY(-0.78125deg)',
194 |         offset: 0.66,
195 |       }),
196 |       style({
197 |         transform: 'skewX(0.390625deg) skewY(0.390625deg)',
198 |         offset: 0.77,
199 |       }),
200 |       style({
201 |         transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)',
202 |         offset: 0.88,
203 |       }),
204 |       style({ transform: 'none', offset: 1 }),
205 |     ])
206 |   ),
207 |   { params: { timing: DEFAULT_TIMING, delay: 0 } }
208 | );
209 | 


--------------------------------------------------------------------------------
/src/bouncing.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AnimationReferenceMetadata,
  3 |   animation,
  4 |   style,
  5 |   animate,
  6 |   keyframes,
  7 | } from '@angular/animations';
  8 | import { DEFAULT_TIMING, transformAxis } from './utils';
  9 | 
 10 | export const bounceIn = animation(
 11 |   animate(
 12 |     '{{ timing }}s {{ delay }}s cubic-bezier(0.215, 0.610, 0.355, 1.000)',
 13 |     keyframes([
 14 |       style({ opacity: 0, transform: 'scale3d(.3, .3, .3)', offset: 0 }),
 15 |       style({ transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.2 }),
 16 |       style({ transform: 'scale3d(.9, .9, .9)', offset: 0.4 }),
 17 |       style({
 18 |         opacity: 1,
 19 |         transform: 'scale3d(1.03, 1.03, 1.03)',
 20 |         offset: 0.6,
 21 |       }),
 22 |       style({ transform: 'scale3d(.97, .97, .97)', offset: 0.8 }),
 23 |       style({ opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 1 }),
 24 |     ])
 25 |   ),
 26 |   { params: { timing: DEFAULT_TIMING, delay: 0 } }
 27 | );
 28 | 
 29 | function bounceInDirection(axis: 'x' | 'y') {
 30 |   const translate3d = transformAxis(axis, 'translate3d');
 31 | 
 32 |   return function(steps) {
 33 |     const params = Object.assign({ timing: DEFAULT_TIMING, delay: 0 }, steps);
 34 | 
 35 |     return animation(
 36 |       animate(
 37 |         '{{ timing }}s {{ delay }}s cubic-bezier(0.215, 0.610, 0.355, 1.000)',
 38 |         keyframes([
 39 |           style({ opacity: 0, transform: translate3d('a'), offset: 0 }),
 40 |           style({ opacity: 1, transform: translate3d('b'), offset: 0.6 }),
 41 |           style({ transform: translate3d('c'), offset: 0.75 }),
 42 |           style({ transform: translate3d('d'), offset: 0.9 }),
 43 |           style({ opacity: 1, transform: 'none', offset: 1 }),
 44 |         ])
 45 |       ),
 46 |       { params }
 47 |     );
 48 |   };
 49 | }
 50 | 
 51 | const bounceInY = bounceInDirection('y');
 52 | const bounceInX = bounceInDirection('x');
 53 | 
 54 | export const bounceInDown = bounceInY({
 55 |   a: '-3000px',
 56 |   b: '25px',
 57 |   c: '-10px',
 58 |   d: '5px',
 59 | });
 60 | 
 61 | export const bounceInUp = bounceInY({
 62 |   a: '3000px',
 63 |   b: '-25px',
 64 |   c: '10px',
 65 |   d: '-5px',
 66 | });
 67 | 
 68 | export const bounceInLeft = bounceInX({
 69 |   a: '-3000px',
 70 |   b: '25px',
 71 |   c: '-10px',
 72 |   d: '5px',
 73 | });
 74 | 
 75 | export const bounceInRight = bounceInX({
 76 |   a: '3000px',
 77 |   b: '-25px',
 78 |   c: '10px',
 79 |   d: '-5px',
 80 | });
 81 | 
 82 | export const bounceOut = animation(
 83 |   animate(
 84 |     '{{ timing }}s {{ delay }}s',
 85 |     keyframes([
 86 |       style({ transform: 'scale3d(.9, .9, .9)', offset: 0.2 }),
 87 |       style({
 88 |         opacity: 1,
 89 |         transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})',
 90 |         offset: 0.5,
 91 |       }),
 92 |       style({
 93 |         opacity: 1,
 94 |         transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})',
 95 |         offset: 0.55,
 96 |       }),
 97 |       style({ opacity: 0, transform: 'scale3d(.3, .3, .3)', offset: 1 }),
 98 |     ])
 99 |   ),
100 |   { params: { timing: DEFAULT_TIMING, delay: 0, scale: 1.1 } }
101 | );
102 | 
103 | function bounceOutDirection(axis: 'x' | 'y') {
104 |   const translate3d = transformAxis(axis, 'translate3d');
105 | 
106 |   if (axis === 'y') {
107 |     return function(steps) {
108 |       const params = Object.assign({ timing: DEFAULT_TIMING, delay: 0 }, steps);
109 | 
110 |       return animation(
111 |         animate(
112 |           '{{ timing }}s {{ delay }}s',
113 |           keyframes([
114 |             style({ transform: translate3d('a'), offset: 0.2 }),
115 |             style({ opacity: 1, transform: translate3d('b'), offset: 0.4 }),
116 |             style({ opacity: 1, transform: translate3d('c'), offset: 0.45 }),
117 |             style({ opacity: 0, transform: translate3d('d'), offset: 1 }),
118 |           ])
119 |         ),
120 |         { params }
121 |       );
122 |     };
123 |   }
124 | 
125 |   return function(steps) {
126 |     const params = Object.assign({ timing: DEFAULT_TIMING, delay: 0 }, steps);
127 | 
128 |     return animation(
129 |       animate(
130 |         '{{ timing }}s {{ delay }}s',
131 |         keyframes([
132 |           style({ opacity: 1, transform: translate3d('a'), offset: 0.2 }),
133 |           style({ opacity: 0, transform: translate3d('b'), offset: 1 }),
134 |         ])
135 |       ),
136 |       { params }
137 |     );
138 |   };
139 | }
140 | 
141 | const bounceOutY = bounceOutDirection('y');
142 | const bounceOutX = bounceOutDirection('x');
143 | 
144 | export const bounceOutDown = bounceOutY({
145 |   a: '10px',
146 |   b: '-20px',
147 |   c: '-20px',
148 |   d: '2000px',
149 | });
150 | 
151 | export const bounceOutUp = bounceOutY({
152 |   a: '-10px',
153 |   b: '20px',
154 |   c: '20px',
155 |   d: '-2000px',
156 | });
157 | 
158 | export const bounceOutLeft = bounceOutX({
159 |   a: '20px',
160 |   b: '-2000px',
161 | });
162 | 
163 | export const bounceOutRight = bounceOutX({
164 |   a: '-20px',
165 |   b: '2000px',
166 | });
167 | 


--------------------------------------------------------------------------------
/src/fading.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AnimationReferenceMetadata,
 3 |   animation,
 4 |   style,
 5 |   animate,
 6 |   keyframes,
 7 | } from '@angular/animations';
 8 | import { DEFAULT_TIMING, transformAxis } from './utils';
 9 | 
10 | function fade(fromOpacity: number, toOpacity: number) {
11 |   return function(axis: 'x' | 'y') {
12 |     const translate3d = transformAxis(axis, 'translate3d');
13 | 
14 |     return function(steps) {
15 |       const params = Object.assign(
16 |         {
17 |           timing: DEFAULT_TIMING,
18 |           delay: 0,
19 |           fromOpacity,
20 |           toOpacity,
21 |         },
22 |         steps
23 |       );
24 | 
25 |       return animation(
26 |         animate(
27 |           '{{ timing }}s {{ delay }}s',
28 |           keyframes([
29 |             style({
30 |               opacity: '{{ fromOpacity }}',
31 |               transform: translate3d('a'),
32 |               offset: 0,
33 |             }),
34 |             style({
35 |               opacity: '{{ toOpacity }}',
36 |               transform: translate3d('b'),
37 |               offset: 1,
38 |             }),
39 |           ])
40 |         ),
41 |         { params }
42 |       );
43 |     };
44 |   };
45 | }
46 | 
47 | const fadeInDirection = fade(0, 1);
48 | const fadeInX = fadeInDirection('x');
49 | const fadeInY = fadeInDirection('y');
50 | 
51 | export const fadeIn = fadeInX({ a: 0, b: 0 });
52 | export const fadeInDown = fadeInY({ a: '-100%', b: 0 });
53 | export const fadeInUp = fadeInY({ a: '100%', b: 0 });
54 | export const fadeInLeft = fadeInX({ a: '-100%', b: 0 });
55 | export const fadeInRight = fadeInX({ a: '100%', b: 0 });
56 | 
57 | const fadeOutDirection = fade(1, 0);
58 | const fadeOutX = fadeOutDirection('x');
59 | const fadeOutY = fadeOutDirection('y');
60 | 
61 | export const fadeOut = fadeOutX({ a: 0, b: 0 });
62 | export const fadeOutDown = fadeOutY({ a: '-100%', b: 0 });
63 | export const fadeOutUp = fadeOutY({ a: '100%', b: 0 });
64 | export const fadeOutLeft = fadeOutX({ a: '-100%', b: 0 });
65 | export const fadeOutRight = fadeOutX({ a: '100%', b: 0 });
66 | 
67 | const slideDirection = fade(1, 1);
68 | const slideX = slideDirection('x');
69 | const slideY = slideDirection('y');
70 | 
71 | export const slideInUp = slideY({ a: '-100%', b: 0 });
72 | export const slideInDown = slideY({ a: '100%', b: 0 });
73 | export const slideInLeft = slideX({ a: '-100%', b: 0 });
74 | export const slideInRight = slideX({ a: '100%', b: 0 });
75 | export const slideOutUp = slideY({ a: 0, b: '-100%' });
76 | export const slideOutDown = slideY({ a: 0, b: '100%' });
77 | export const slideOutLeft = slideX({ a: 0, b: '-100%' });
78 | export const slideOutRight = slideX({ a: 0, b: '100%' });
79 | 


--------------------------------------------------------------------------------
/src/flippers.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AnimationReferenceMetadata,
  3 |   animation,
  4 |   style,
  5 |   animate,
  6 |   keyframes,
  7 | } from '@angular/animations';
  8 | import { DEFAULT_TIMING } from './utils';
  9 | 
 10 | export const flip = animation(
 11 |   [
 12 |     style({ 'backface-visibility': 'visible' }),
 13 |     animate(
 14 |       '{{ timing }}s {{ delay }}s ease-out',
 15 |       keyframes([
 16 |         style({
 17 |           transform: 'perspective(400px) rotate3d(0, 1, 0, -360deg)',
 18 |           offset: 0,
 19 |         }),
 20 |         style({
 21 |           transform:
 22 |             'perspective(400px) scale3d(1.5, 1.5, 1.5) rotate3d(0, 1, 0, -190deg)',
 23 |           offset: 0.4,
 24 |         }),
 25 |         style({
 26 |           transform:
 27 |             'perspective(400px) scale3d(1.5, 1.5, 1.5) rotate3d(0, 1, 0, -170deg)',
 28 |           offset: 0.5,
 29 |         }),
 30 |         style({
 31 |           transform: 'perspective(400px) scale3d(.95, .95, .95)',
 32 |           offset: 0.8,
 33 |         }),
 34 |         style({
 35 |           transform: 'perspective(400px)',
 36 |           offset: 1,
 37 |         }),
 38 |       ])
 39 |     ),
 40 |   ],
 41 |   {
 42 |     params: { timing: DEFAULT_TIMING, delay: 0 },
 43 |   }
 44 | );
 45 | 
 46 | function flipIn(rotateX, rotateY) {
 47 |   const params = { timing: DEFAULT_TIMING, delay: 0, rotateX, rotateY };
 48 | 
 49 |   return animation(
 50 |     [
 51 |       style({ 'backface-visibility': 'visible' }),
 52 |       animate(
 53 |         '{{ timing }}s {{ delay }}s ease-in',
 54 |         keyframes([
 55 |           style({
 56 |             opacity: 0,
 57 |             transform:
 58 |               'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, 90deg)',
 59 |             offset: 0,
 60 |           }),
 61 |           style({
 62 |             opacity: 1,
 63 |             transform:
 64 |               'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, -20deg)',
 65 |             offset: 0.4,
 66 |           }),
 67 |           style({
 68 |             transform:
 69 |               'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, 10deg)',
 70 |             offset: 0.6,
 71 |           }),
 72 |           style({
 73 |             transform:
 74 |               'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, -5deg)',
 75 |             offset: 0.8,
 76 |           }),
 77 |           style({
 78 |             transform: 'perspective(400px) rotate3d(0, 0, 0, 0)',
 79 |             offset: 1,
 80 |           }),
 81 |         ])
 82 |       ),
 83 |     ],
 84 |     { params }
 85 |   );
 86 | }
 87 | 
 88 | export const flipInX = flipIn(1, 0);
 89 | export const flipInY = flipIn(0, 1);
 90 | 
 91 | function flipOut(rotateX, rotateY) {
 92 |   const params = { timing: DEFAULT_TIMING, delay: 0, rotateX, rotateY };
 93 | 
 94 |   return animation(
 95 |     [
 96 |       style({ 'backface-visibility': 'visible' }),
 97 |       animate(
 98 |         '{{ timing }}s {{ delay }}s',
 99 |         keyframes([
100 |           style({
101 |             transform: 'perspective(400px)',
102 |             offset: 0,
103 |           }),
104 |           style({
105 |             opacity: 1,
106 |             transform:
107 |               'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, -20deg)',
108 |             offset: 0.3,
109 |           }),
110 |           style({
111 |             opacity: 0,
112 |             transform:
113 |               'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, 90deg)',
114 |             offset: 1,
115 |           }),
116 |         ])
117 |       ),
118 |     ],
119 |     { params }
120 |   );
121 | }
122 | 
123 | export const flipOutX = flipOut(1, 0);
124 | export const flipOutY = flipOut(0, 1);
125 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AnimationReferenceMetadata,
 3 |   animation,
 4 |   style,
 5 |   animate,
 6 |   keyframes,
 7 | } from '@angular/animations';
 8 | 
 9 | export {
10 |   bounce,
11 |   flash,
12 |   pulse,
13 |   rubberBand,
14 |   shake,
15 |   swing,
16 |   tada,
17 |   wobble,
18 |   jello,
19 | } from './attention-seekers';
20 | 
21 | export {
22 |   bounceIn,
23 |   bounceInDown,
24 |   bounceInLeft,
25 |   bounceInRight,
26 |   bounceInUp,
27 |   bounceOut,
28 |   bounceOutDown,
29 |   bounceOutLeft,
30 |   bounceOutRight,
31 |   bounceOutUp,
32 | } from './bouncing';
33 | 
34 | export {
35 |   fadeIn,
36 |   fadeInDown,
37 |   fadeInUp,
38 |   fadeInLeft,
39 |   fadeInRight,
40 |   fadeOut,
41 |   fadeOutDown,
42 |   fadeOutUp,
43 |   fadeOutLeft,
44 |   fadeOutRight,
45 |   slideInDown,
46 |   slideInUp,
47 |   slideInLeft,
48 |   slideInRight,
49 |   slideOutDown,
50 |   slideOutUp,
51 |   slideOutLeft,
52 |   slideOutRight,
53 | } from './fading';
54 | 
55 | export { flip, flipInX, flipInY, flipOutX, flipOutY } from './flippers';
56 | 
57 | export { lightSpeedIn, lightSpeedOut } from './lightSpeed';
58 | 
59 | export {
60 |   rotateIn,
61 |   rotateInDownLeft,
62 |   rotateInDownRight,
63 |   rotateInUpLeft,
64 |   rotateInUpRight,
65 |   rotateOut,
66 |   rotateOutDownLeft,
67 |   rotateOutDownRight,
68 |   rotateOutUpLeft,
69 |   rotateOutUpRight,
70 | } from './rotate';
71 | 
72 | export { hinge, jackInTheBox, rollIn, rollOut } from './specials';
73 | 
74 | export {
75 |   zoomIn,
76 |   zoomInDown,
77 |   zoomInUp,
78 |   zoomInLeft,
79 |   zoomInRight,
80 |   zoomOut,
81 |   zoomOutDown,
82 |   zoomOutUp,
83 |   zoomOutLeft,
84 |   zoomOutRight,
85 | } from './zooming';
86 | 


--------------------------------------------------------------------------------
/src/lightspeed.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AnimationReferenceMetadata,
 3 |   animation,
 4 |   style,
 5 |   animate,
 6 |   keyframes,
 7 | } from '@angular/animations';
 8 | import { DEFAULT_TIMING } from './utils';
 9 | 
10 | export const lightSpeedIn = animation(
11 |   animate(
12 |     '{{ timing }}s {{ delay }}s',
13 |     keyframes([
14 |       style({
15 |         opacity: 0,
16 |         transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
17 |         offset: 0,
18 |       }),
19 |       style({
20 |         opacity: 1,
21 |         transform: 'translate3d(0, 0, 0) skewX(0)',
22 |         offset: 1,
23 |       }),
24 |     ])
25 |   ),
26 |   {
27 |     params: { timing: DEFAULT_TIMING, delay: 0 },
28 |   }
29 | );
30 | 
31 | export const lightSpeedOut = animation(
32 |   animate(
33 |     '{{ timing }}s {{ delay }}s ease-out',
34 |     keyframes([
35 |       style({
36 |         opacity: 1,
37 |         offset: 0,
38 |       }),
39 |       style({
40 |         opacity: 0,
41 |         transform: 'translate3d(100%, 0, 0) skewX(30deg)',
42 |         offset: 1,
43 |       }),
44 |     ])
45 |   ),
46 |   {
47 |     params: { timing: DEFAULT_TIMING, delay: 0 },
48 |   }
49 | );
50 | 


--------------------------------------------------------------------------------
/src/rotate.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AnimationReferenceMetadata,
 3 |   animation,
 4 |   style,
 5 |   animate,
 6 |   keyframes,
 7 | } from '@angular/animations';
 8 | import { DEFAULT_TIMING, transformAxis } from './utils';
 9 | 
10 | function rotate(fromOpacity: number, toOpacity: number) {
11 |   const isIn = fromOpacity <= toOpacity;
12 | 
13 |   return function(origin: string) {
14 |     return function(degrees) {
15 |       const params = {
16 |         timing: DEFAULT_TIMING,
17 |         delay: 0,
18 |         fromOpacity,
19 |         toOpacity,
20 |         origin,
21 |         degrees,
22 |       };
23 | 
24 |       return animation(
25 |         animate(
26 |           '{{ timing }}s {{ delay }}s',
27 |           keyframes([
28 |             style({
29 |               'transform-origin': '{{ origin }}',
30 |               opacity: '{{ fromOpacity }}',
31 |               transform: isIn ? 'rotate3d(0, 0, 1, {{ degrees }})' : 'none',
32 |               offset: 0,
33 |             }),
34 |             style({
35 |               'transform-origin': '{{ origin }}',
36 |               opacity: '{{ toOpacity }}',
37 |               transform: isIn ? 'none' : 'rotate3d(0, 0, 1, {{ degrees }})',
38 |               offset: 1,
39 |             }),
40 |           ])
41 |         ),
42 |         { params }
43 |       );
44 |     };
45 |   };
46 | }
47 | 
48 | const rotateInDirection = rotate(0, 1);
49 | const rotateInLeft = rotateInDirection('left bottom');
50 | const rotateInRight = rotateInDirection('right bottom');
51 | 
52 | export const rotateIn = rotateInDirection('center')('-200deg');
53 | export const rotateInDownLeft = rotateInLeft('-45deg');
54 | export const rotateInDownRight = rotateInRight('45deg');
55 | export const rotateInUpLeft = rotateInLeft('45deg');
56 | export const rotateInUpRight = rotateInRight('-90deg');
57 | 
58 | const rotateOutDirection = rotate(1, 0);
59 | const rotateOutLeft = rotateOutDirection('left bottom');
60 | const rotateOutRight = rotateOutDirection('right bottom');
61 | 
62 | export const rotateOut = rotateOutDirection('center')('200deg');
63 | export const rotateOutDownLeft = rotateOutLeft('45deg');
64 | export const rotateOutDownRight = rotateOutRight('-45deg');
65 | export const rotateOutUpLeft = rotateOutLeft('-45deg');
66 | export const rotateOutUpRight = rotateOutRight('90deg');
67 | 


--------------------------------------------------------------------------------
/src/specials.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AnimationReferenceMetadata,
  3 |   animation,
  4 |   style,
  5 |   animate,
  6 |   keyframes,
  7 | } from '@angular/animations';
  8 | import { DEFAULT_TIMING } from './utils';
  9 | 
 10 | export const hinge = animation(
 11 |   [
 12 |     style({ 'transform-origin': 'top left' }),
 13 |     animate(
 14 |       '{{ timing }}s {{ delay }}s ease-in-out',
 15 |       keyframes([
 16 |         style({
 17 |           transform: 'rotate3d(0, 0, 1, 80deg)',
 18 |           offset: 0.2,
 19 |         }),
 20 |         style({
 21 |           transform: 'rotate3d(0, 0, 1, 60deg)',
 22 |           offset: 0.4,
 23 |         }),
 24 |         style({
 25 |           transform: 'rotate3d(0, 0, 1, 80deg)',
 26 |           offset: 0.6,
 27 |         }),
 28 |         style({
 29 |           opacity: 1,
 30 |           transform: 'rotate3d(0, 0, 1, 60deg)',
 31 |           offset: 0.8,
 32 |         }),
 33 |         style({
 34 |           opacity: 0,
 35 |           transform: 'translate3d(0, 700px, 0)',
 36 |           offset: 1,
 37 |         }),
 38 |       ])
 39 |     ),
 40 |   ],
 41 |   {
 42 |     params: { timing: DEFAULT_TIMING, delay: 0 },
 43 |   }
 44 | );
 45 | 
 46 | export const jackInTheBox = animation(
 47 |   [
 48 |     animate(
 49 |       '{{ timing }}s {{ delay }}s',
 50 |       keyframes([
 51 |         style({
 52 |           opacity: 0,
 53 |           transform: 'scale(0.1) rotate(30deg)',
 54 |           'transform-origin': 'center bottom',
 55 |           offset: 0,
 56 |         }),
 57 |         style({
 58 |           opacity: 0.5,
 59 |           transform: 'rotate(-10deg)',
 60 |           offset: 0.5,
 61 |         }),
 62 |         style({
 63 |           opacity: 0.7,
 64 |           transform: 'rotate(3deg)',
 65 |           offset: 0.7,
 66 |         }),
 67 |         style({
 68 |           opacity: 1,
 69 |           transform: 'scale(1)',
 70 |           offset: 1,
 71 |         }),
 72 |       ])
 73 |     ),
 74 |   ],
 75 |   {
 76 |     params: { timing: DEFAULT_TIMING, delay: 0 },
 77 |   }
 78 | );
 79 | 
 80 | export const rollIn = animation(
 81 |   [
 82 |     animate(
 83 |       '{{ timing }}s {{ delay }}s',
 84 |       keyframes([
 85 |         style({
 86 |           opacity: 0,
 87 |           transform: 'translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)',
 88 |           offset: 0,
 89 |         }),
 90 |         style({
 91 |           opacity: 1,
 92 |           transform: 'none',
 93 |           offset: 1,
 94 |         }),
 95 |       ])
 96 |     ),
 97 |   ],
 98 |   {
 99 |     params: { timing: DEFAULT_TIMING, delay: 0 },
100 |   }
101 | );
102 | 
103 | export const rollOut = animation(
104 |   [
105 |     animate(
106 |       '{{ timing }}s {{ delay }}s',
107 |       keyframes([
108 |         style({
109 |           opacity: 1,
110 |           offset: 0,
111 |         }),
112 |         style({
113 |           opacity: 0,
114 |           transform: 'translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)',
115 |           offset: 1,
116 |         }),
117 |       ])
118 |     ),
119 |   ],
120 |   {
121 |     params: { timing: DEFAULT_TIMING, delay: 0 },
122 |   }
123 | );
124 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | export function transformAxis(axis: 'x' | 'y', name: string) {
 2 |   return function(letter: string): string {
 3 |     return axis === 'x'
 4 |       ? `${name}({{ ${letter} }}, 0, 0)`
 5 |       : `${name}(0, {{ ${letter} }}, 0)`;
 6 |   };
 7 | }
 8 | 
 9 | export const DEFAULT_TIMING = 1;
10 | 


--------------------------------------------------------------------------------
/src/zooming.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AnimationReferenceMetadata,
  3 |   animation,
  4 |   style,
  5 |   animate,
  6 |   keyframes,
  7 | } from '@angular/animations';
  8 | import { DEFAULT_TIMING, transformAxis } from './utils';
  9 | 
 10 | export const zoomIn = animation(
 11 |   [
 12 |     animate(
 13 |       '{{ timing }}s {{ delay }}s',
 14 |       keyframes([
 15 |         style({
 16 |           opacity: 0,
 17 |           transform: 'scale3d(.3, .3, .3)',
 18 |           offset: 0,
 19 |         }),
 20 |         style({
 21 |           opacity: 1,
 22 |           transform: 'scale3d(1, 1, 1)',
 23 |           offset: 0.5,
 24 |         }),
 25 |       ])
 26 |     ),
 27 |   ],
 28 |   {
 29 |     params: { timing: DEFAULT_TIMING, delay: 0 },
 30 |   }
 31 | );
 32 | 
 33 | function zoomInDirection(axis: 'x' | 'y') {
 34 |   const translate3d = transformAxis(axis, 'translate3d');
 35 | 
 36 |   return function(steps) {
 37 |     const params = Object.assign({ timing: DEFAULT_TIMING, delay: 0 }, steps);
 38 | 
 39 |     return animation(
 40 |       animate(
 41 |         '{{ timing }}s {{ delay }}s cubic-bezier(0.550, 0.055, 0.675, 0.190)',
 42 |         keyframes([
 43 |           style({
 44 |             opacity: 0,
 45 |             transform: `scale3d(.1, .1, .1) ${translate3d('a')}`,
 46 |             offset: 0,
 47 |           }),
 48 |           style({
 49 |             opacity: 1,
 50 |             transform: `scale3d(.475, .475, .475) ${translate3d('b')}`,
 51 |             offset: 0.6,
 52 |           }),
 53 |         ])
 54 |       ),
 55 |       { params }
 56 |     );
 57 |   };
 58 | }
 59 | 
 60 | const zoomInY = zoomInDirection('y');
 61 | const zoomInX = zoomInDirection('x');
 62 | 
 63 | export const zoomInDown = zoomInY({
 64 |   a: '-1000px',
 65 |   b: '10px',
 66 | });
 67 | export const zoomInUp = zoomInY({
 68 |   a: '1000px',
 69 |   b: '-10px',
 70 | });
 71 | export const zoomInLeft = zoomInX({
 72 |   a: '-1000px',
 73 |   b: '10px',
 74 | });
 75 | export const zoomInRight = zoomInX({
 76 |   a: '1000px',
 77 |   b: '-10px',
 78 | });
 79 | 
 80 | export const zoomOut = animation(
 81 |   [
 82 |     animate(
 83 |       '{{ timing }}s {{ delay }}s',
 84 |       keyframes([
 85 |         style({
 86 |           opacity: 1,
 87 |           offset: 0,
 88 |         }),
 89 |         style({
 90 |           opacity: 0,
 91 |           transform: 'scale3d(.3, .3, .3)',
 92 |           offset: 0.5,
 93 |         }),
 94 |         style({
 95 |           opacity: 0,
 96 |           offset: 1,
 97 |         }),
 98 |       ])
 99 |     ),
100 |   ],
101 |   {
102 |     params: { timing: DEFAULT_TIMING, delay: 0 },
103 |   }
104 | );
105 | 
106 | function zoomOutDirection(axis: 'x' | 'y') {
107 |   const translate3d = transformAxis(axis, 'translate3d');
108 | 
109 |   return function(steps) {
110 |     const params = Object.assign({ timing: DEFAULT_TIMING, delay: 0 }, steps);
111 | 
112 |     return animation(
113 |       animate(
114 |         '{{ timing }}s {{ delay }}s cubic-bezier(0.550, 0.055, 0.675, 0.190)',
115 |         keyframes([
116 |           style({
117 |             opacity: 1,
118 |             transform: `scale3d(.475, .475, .475) ${translate3d('a')}`,
119 |             offset: 0.4,
120 |           }),
121 |           style({
122 |             opacity: 0,
123 |             transform: `scale3d(.1, .1, .1) ${translate3d('b')}`,
124 |             offset: 1,
125 |           }),
126 |         ])
127 |       ),
128 |       { params }
129 |     );
130 |   };
131 | }
132 | 
133 | const zoomOutY = zoomOutDirection('y');
134 | const zoomOutX = zoomOutDirection('x');
135 | 
136 | export const zoomOutDown = zoomOutY({
137 |   a: '-60px',
138 |   b: '2000px',
139 | });
140 | export const zoomOutUp = zoomOutY({
141 |   a: '60px',
142 |   b: '-2000px',
143 | });
144 | export const zoomOutLeft = zoomOutX({
145 |   a: '42px',
146 |   b: '-2000px',
147 | });
148 | export const zoomOutRight = zoomOutX({
149 |   a: '-42px',
150 |   b: '2000px',
151 | });
152 | 


--------------------------------------------------------------------------------
/tsconfig-prod.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "allowSyntheticDefaultImports": true,
 4 |         "declaration": true,
 5 |         "emitDecoratorMetadata": true,
 6 |         "experimentalDecorators": true,
 7 |         "lib": ["dom", "es2015", "es2016"],
 8 |         "module": "commonjs",
 9 |         "moduleResolution": "node",
10 |         "target": "es5",
11 |         "baseUrl": ".",
12 |         "outDir": "./lib",
13 |         "paths": {}
14 |     },
15 |     "include": ["./src"],
16 |     "exclude": [
17 |         "lib",
18 |         "demo",
19 |         "node_modules"
20 |     ],
21 |     "compileOnSave": false,
22 |     "buildOnSave": false
23 | }
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "allowSyntheticDefaultImports": true,
 4 |         "declaration": false,
 5 |         "emitDecoratorMetadata": true,
 6 |         "experimentalDecorators": true,
 7 |         "lib": ["dom", "es2015", "es2016"],
 8 |         "module": "commonjs",
 9 |         "moduleResolution": "node",
10 |         "target": "es5",
11 |         "baseUrl": ".",
12 |         "paths": {}
13 |     },
14 |     "exclude": [
15 |         "lib",
16 |         "node_modules"
17 |     ],
18 |     "compileOnSave": false,
19 |     "buildOnSave": false
20 | }
21 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 | 
 4 |   "rulesDirectory": [
 5 |     "node_modules/codelyzer"
 6 |   ],
 7 | 
 8 |   "rules": {
 9 |     "arrow-parens": false,
10 |     "curly": false,
11 |     "object-literal-key-quotes": [false],
12 |     "object-literal-sort-keys": false,
13 |     "one-line": [false],
14 |     "only-arrow-functions": [false],
15 |     "member-access": false,
16 |     "member-ordering": [false],
17 |     "no-console": [false],
18 |     "no-string-literal": false,
19 |     "no-var-requires": false,
20 |     "ordered-imports": [false],
21 |     "quotemark": [true, "single"],
22 |     "trailing-comma": [true, { "multiline": {
23 |       "objects": "always",
24 |       "arrays": "always",
25 |       "functions": "never",
26 |       "typeLiterals": "ignore"
27 |     }, "singleline": "never" }],
28 |     "variable-name": [true, "check-format", "allow-leading-underscore"],
29 | 
30 |     "directive-selector": [false],
31 |     "component-selector": [true, "element", "demo", "kebab-case"],
32 | 
33 |     "use-input-property-decorator": true,
34 |     "use-output-property-decorator": true,
35 |     "use-host-property-decorator": true,
36 |     "no-attribute-parameter-decorator": true,
37 |     "no-input-rename": false,
38 |     "no-output-rename": false,
39 |     "no-forward-ref": false,
40 |     "use-life-cycle-interface": true,
41 |     "use-pipe-transform-interface": true,
42 |     "component-class-suffix": [true, "Component"],
43 |     "directive-class-suffix": false,
44 |     "import-destructuring-spacing": true,
45 |     "templates-use-public": true,
46 |     "no-access-missing-member": true,
47 |     "invoke-injectable": true
48 |     }
49 | }
50 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const webpack = require('webpack');
  3 | const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
  4 | const CopyWebpackPlugin = require('copy-webpack-plugin');
  5 | 
  6 | /**
  7 |  * @TODO: sometimes try with AOTPlugin to see if Angular's shit is better and supports Animations now
  8 |  */
  9 | 
 10 | const root = {
 11 |   src: path.join(__dirname, 'demo'),
 12 |   dest: path.join(__dirname, 'demo-dist'),
 13 | };
 14 | const IS_DEV = process.env.NODE_ENV !== 'production';
 15 | 
 16 | const devPlugins = [
 17 |   new CopyWebpackPlugin([
 18 |     { from: path.join(root.src, 'assets'), to: 'assets' },
 19 |   ]),
 20 |   new webpack.ContextReplacementPlugin(
 21 |     /angular(\\|\/)core(\\|\/)@angular/,
 22 |     root.src
 23 |   ),
 24 | ];
 25 | const prodPlugins = [
 26 |   new AngularCompilerPlugin({
 27 |     tsConfigPath: 'tsconfig.json',
 28 |     entryModule: path.resolve(__dirname, 'demo/app/app.module#AppModule'),
 29 |     compilerOptions: {
 30 |       angularCompilerOptions: {
 31 |         genDir: 'demo-dist',
 32 |         skipMetadataEmit: true,
 33 |       },
 34 |     },
 35 |   }),
 36 |   new CopyWebpackPlugin([
 37 |     { from: path.join(root.src, 'assets'), to: 'assets' },
 38 |   ]),
 39 |   new webpack.optimize.UglifyJsPlugin({
 40 |     sourceMap: false,
 41 |     output: { comments: false },
 42 |     compressor: {
 43 |       warnings: false,
 44 |     },
 45 |   }),
 46 |   new webpack.ContextReplacementPlugin(
 47 |     /angular(\\|\/)core(\\|\/)@angular/,
 48 |     root.src
 49 |   ),
 50 |   new webpack.DefinePlugin({
 51 |     'process.env': {
 52 |       NODE_ENV: JSON.stringify('production'),
 53 |     },
 54 |   }),
 55 | ];
 56 | 
 57 | const tsLoader = IS_DEV
 58 |   ? {
 59 |       test: /\.tsx?$/,
 60 |       use: ['ts-loader', 'angular2-template-loader'],
 61 |       exclude: [/node_modules/],
 62 |     }
 63 |   : {
 64 |       test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
 65 |       loader: '@ngtools/webpack',
 66 |     };
 67 | 
 68 | module.exports = {
 69 |   devServer: IS_DEV
 70 |     ? {
 71 |         historyApiFallback: true,
 72 |         noInfo: false,
 73 |         port: 3000,
 74 |       }
 75 |     : {},
 76 |   devtool: 'eval',
 77 |   entry: path.join(root.src, IS_DEV ? 'main.ts' : 'main-prod.ts'),
 78 |   output: {
 79 |     path: root.dest,
 80 |     filename: 'js/main.js',
 81 |   },
 82 |   resolve: {
 83 |     extensions: ['.js', '.ts'],
 84 |   },
 85 |   module: {
 86 |     rules: [
 87 |       tsLoader,
 88 |       {
 89 |         test: /\.html$/,
 90 |         use: 'raw-loader',
 91 |         exclude: [/node_modules/],
 92 |       },
 93 |       {
 94 |         test: /\.css$/,
 95 |         use: ['raw-loader'],
 96 |       },
 97 |       {
 98 |         test: /\.(png|jpg|jpeg|gif|svg)$/i,
 99 |         use: [
100 |           {
101 |             loader: 'file-loader',
102 |             options: {
103 |               name: '/images/[name]_[hash:5].[ext]?[hash:5]',
104 |             },
105 |           },
106 |         ],
107 |       },
108 |     ],
109 |   },
110 |   plugins: IS_DEV ? devPlugins : prodPlugins,
111 | };
112 | 


--------------------------------------------------------------------------------