@angular/animations - npm Package Compare versions

Comparing version 4.3.1 to 5.0.0-beta.0

@angular/animations.es5.js

 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -570,3 +570,3 @@ * License: MIT
  *
- * ### Transition Aliases (`:enter` and `:leave`)
+ * ### Using :enter and :leave
  *
@@ -581,3 +581,3 @@ * Given that enter (insertion) and leave (removal) animations are so common, the `transition`
  *   animate(500, style({ opacity: 1 }))
- * ])
+ * ]),
  * transition(":leave", [
@@ -588,2 +588,78 @@ *   animate(500, style({ opacity: 0 }))
  *
+ * ### Using :increment and :decrement
+ * In addition to the :enter and :leave transition aliases, the :increment and :decrement aliases
+ * can be used to kick off a transition when a numeric value has increased or decreased in value.
+ *
+ * ```
+ * import {group, animate, query, transition, style, trigger} from '\@angular/animations';
+ * import {Component} from '\@angular/core';
+ *
+ * \@Component({
+ *   selector: 'banner-carousel-component',
+ *   styles: [`
+ *     .banner-container {
+ *        position:relative;
+ *        height:500px;
+ *        overflow:hidden;
+ *      }
+ *     .banner-container > .banner {
+ *        position:absolute;
+ *        left:0;
+ *        top:0;
+ *        font-size:200px;
+ *        line-height:500px;
+ *        font-weight:bold;
+ *        text-align:center;
+ *        width:100%;
+ *      }
+ *   `],
+ *   template: `
+ *     <button (click)="previous()">Previous</button>
+ *     <button (click)="next()">Next</button>
+ *     <hr>
+ *     <div [\@bannerAnimation]="selectedIndex" class="banner-container">
+ *       <div class="banner"> {{ banner }} </div>
+ *     </div>
+ *   `
+ *   animations: [
+ *     trigger('bannerAnimation', [
+ *       transition(":increment", group([
+ *         query(':enter', [
+ *           style({ left: '100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '-100%' }))
+ *         ])
+ *       ])),
+ *       transition(":decrement", group([
+ *         query(':enter', [
+ *           style({ left: '-100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '100%' }))
+ *         ])
+ *       ])),
+ *     ])
+ *   ]
+ * })
+ * class BannerCarouselComponent {
+ *   allBanners: string[] = ['1', '2', '3', '4'];
+ *   selectedIndex: number = 0;
+ *
+ *   get banners() {
+ *      return [this.allBanners[this.selectedIndex]];
+ *   }
+ *
+ *   previous() {
+ *     this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+ *   }
+ *
+ *   next() {
+ *     this.selectedIndex = Math.min(this.selectedIndex + 1, this.allBanners.length - 1);
+ *   }
+ * }
+ * ```
+ *
  * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
@@ -590,0 +666,0 @@ *

@angular/animations.js

 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -562,3 +562,3 @@ * License: MIT
  *
- * ### Transition Aliases (`:enter` and `:leave`)
+ * ### Using :enter and :leave
  *
@@ -573,3 +573,3 @@ * Given that enter (insertion) and leave (removal) animations are so common, the `transition`
  *   animate(500, style({ opacity: 1 }))
- * ])
+ * ]),
  * transition(":leave", [
@@ -580,2 +580,78 @@ *   animate(500, style({ opacity: 0 }))
  *
+ * ### Using :increment and :decrement
+ * In addition to the :enter and :leave transition aliases, the :increment and :decrement aliases
+ * can be used to kick off a transition when a numeric value has increased or decreased in value.
+ *
+ * ```
+ * import {group, animate, query, transition, style, trigger} from '\@angular/animations';
+ * import {Component} from '\@angular/core';
+ *
+ * \@Component({
+ *   selector: 'banner-carousel-component',
+ *   styles: [`
+ *     .banner-container {
+ *        position:relative;
+ *        height:500px;
+ *        overflow:hidden;
+ *      }
+ *     .banner-container > .banner {
+ *        position:absolute;
+ *        left:0;
+ *        top:0;
+ *        font-size:200px;
+ *        line-height:500px;
+ *        font-weight:bold;
+ *        text-align:center;
+ *        width:100%;
+ *      }
+ *   `],
+ *   template: `
+ *     <button (click)="previous()">Previous</button>
+ *     <button (click)="next()">Next</button>
+ *     <hr>
+ *     <div [\@bannerAnimation]="selectedIndex" class="banner-container">
+ *       <div class="banner"> {{ banner }} </div>
+ *     </div>
+ *   `
+ *   animations: [
+ *     trigger('bannerAnimation', [
+ *       transition(":increment", group([
+ *         query(':enter', [
+ *           style({ left: '100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '-100%' }))
+ *         ])
+ *       ])),
+ *       transition(":decrement", group([
+ *         query(':enter', [
+ *           style({ left: '-100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '100%' }))
+ *         ])
+ *       ])),
+ *     ])
+ *   ]
+ * })
+ * class BannerCarouselComponent {
+ *   allBanners: string[] = ['1', '2', '3', '4'];
+ *   selectedIndex: number = 0;
+ *
+ *   get banners() {
+ *      return [this.allBanners[this.selectedIndex]];
+ *   }
+ *
+ *   previous() {
+ *     this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+ *   }
+ *
+ *   next() {
+ *     this.selectedIndex = Math.min(this.selectedIndex + 1, this.allBanners.length - 1);
+ *   }
+ * }
+ * ```
+ *
  * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
@@ -582,0 +658,0 @@ *

@angular/animations/browser/testing.es5.js

 import * as tslib_1 from "tslib";
 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -5,0 +5,0 @@ * License: MIT

@angular/animations/browser/testing.js

 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -4,0 +4,0 @@ * License: MIT

browser.d.ts

 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -4,0 +4,0 @@ * License: MIT

browser/testing.d.ts

 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -4,0 +4,0 @@ * License: MIT

bundles/animations-browser-testing.umd.js

 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -39,3 +39,3 @@ * License: MIT
 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -42,0 +42,0 @@ * License: MIT

bundles/animations-browser-testing.umd.min.js

 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -4,0 +4,0 @@ * License: MIT

bundles/animations.umd.js

 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -13,3 +13,3 @@ * License: MIT
 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -582,3 +582,3 @@ * License: MIT
  *
- * ### Transition Aliases (`:enter` and `:leave`)
+ * ### Using :enter and :leave
  *
@@ -593,3 +593,3 @@ * Given that enter (insertion) and leave (removal) animations are so common, the `transition`
  *   animate(500, style({ opacity: 1 }))
- * ])
+ * ]),
  * transition(":leave", [
@@ -600,2 +600,78 @@ *   animate(500, style({ opacity: 0 }))
  *
+ * ### Using :increment and :decrement
+ * In addition to the :enter and :leave transition aliases, the :increment and :decrement aliases
+ * can be used to kick off a transition when a numeric value has increased or decreased in value.
+ *
+ * ```
+ * import {group, animate, query, transition, style, trigger} from '\@angular/animations';
+ * import {Component} from '\@angular/core';
+ *
+ * \@Component({
+ *   selector: 'banner-carousel-component',
+ *   styles: [`
+ *     .banner-container {
+ *        position:relative;
+ *        height:500px;
+ *        overflow:hidden;
+ *      }
+ *     .banner-container > .banner {
+ *        position:absolute;
+ *        left:0;
+ *        top:0;
+ *        font-size:200px;
+ *        line-height:500px;
+ *        font-weight:bold;
+ *        text-align:center;
+ *        width:100%;
+ *      }
+ *   `],
+ *   template: `
+ *     <button (click)="previous()">Previous</button>
+ *     <button (click)="next()">Next</button>
+ *     <hr>
+ *     <div [\@bannerAnimation]="selectedIndex" class="banner-container">
+ *       <div class="banner"> {{ banner }} </div>
+ *     </div>
+ *   `
+ *   animations: [
+ *     trigger('bannerAnimation', [
+ *       transition(":increment", group([
+ *         query(':enter', [
+ *           style({ left: '100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '-100%' }))
+ *         ])
+ *       ])),
+ *       transition(":decrement", group([
+ *         query(':enter', [
+ *           style({ left: '-100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '100%' }))
+ *         ])
+ *       ])),
+ *     ])
+ *   ]
+ * })
+ * class BannerCarouselComponent {
+ *   allBanners: string[] = ['1', '2', '3', '4'];
+ *   selectedIndex: number = 0;
+ *
+ *   get banners() {
+ *      return [this.allBanners[this.selectedIndex]];
+ *   }
+ *
+ *   previous() {
+ *     this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+ *   }
+ *
+ *   next() {
+ *     this.selectedIndex = Math.min(this.selectedIndex + 1, this.allBanners.length - 1);
+ *   }
+ * }
+ * ```
+ *
  * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
@@ -602,0 +678,0 @@ *

bundles/animations.umd.min.js

 /**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -16,3 +16,3 @@ * License: MIT
 function scheduleMicroTask(cb){Promise.resolve(null).then(cb)}/**
- * @license Angular v4.3.1
+ * @license Angular v5.0.0-beta.0
  * (c) 2010-2017 Google, Inc. https://angular.io/
@@ -19,0 +19,0 @@ * License: MIT

package.json

 {
   "name": "@angular/animations",
-  "version": "4.3.1",
+  "version": "5.0.0-beta.0",
   "description": "Angular - animations integration with web-animationss",
@@ -15,3 +15,3 @@ "main": "./bundles/animations.umd.js",
   "peerDependencies": {
-    "@angular/core": "4.3.1"
+    "@angular/core": "5.0.0-beta.0"
   },
@@ -18,0 +18,0 @@ "repository": {

src/animation_metadata.d.ts

@@ -682,3 +682,3 @@ /**
  *
- * ### Transition Aliases (`:enter` and `:leave`)
+ * ### Using :enter and :leave
  *
@@ -693,3 +693,3 @@ * Given that enter (insertion) and leave (removal) animations are so common, the `transition`
  *   animate(500, style({ opacity: 1 }))
- * ])
+ * ]),
  * transition(":leave", [
@@ -700,2 +700,78 @@ *   animate(500, style({ opacity: 0 }))
  *
+ * ### Using :increment and :decrement
+ * In addition to the :enter and :leave transition aliases, the :increment and :decrement aliases
+ * can be used to kick off a transition when a numeric value has increased or decreased in value.
+ *
+ * ```
+ * import {group, animate, query, transition, style, trigger} from '@angular/animations';
+ * import {Component} from '@angular/core';
+ *
+ * @Component({
+ *   selector: 'banner-carousel-component',
+ *   styles: [`
+ *     .banner-container {
+ *        position:relative;
+ *        height:500px;
+ *        overflow:hidden;
+ *      }
+ *     .banner-container > .banner {
+ *        position:absolute;
+ *        left:0;
+ *        top:0;
+ *        font-size:200px;
+ *        line-height:500px;
+ *        font-weight:bold;
+ *        text-align:center;
+ *        width:100%;
+ *      }
+ *   `],
+ *   template: `
+ *     <button (click)="previous()">Previous</button>
+ *     <button (click)="next()">Next</button>
+ *     <hr>
+ *     <div [@bannerAnimation]="selectedIndex" class="banner-container">
+ *       <div class="banner"> {{ banner }} </div>
+ *     </div>
+ *   `
+ *   animations: [
+ *     trigger('bannerAnimation', [
+ *       transition(":increment", group([
+ *         query(':enter', [
+ *           style({ left: '100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '-100%' }))
+ *         ])
+ *       ])),
+ *       transition(":decrement", group([
+ *         query(':enter', [
+ *           style({ left: '-100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '100%' }))
+ *         ])
+ *       ])),
+ *     ])
+ *   ]
+ * })
+ * class BannerCarouselComponent {
+ *   allBanners: string[] = ['1', '2', '3', '4'];
+ *   selectedIndex: number = 0;
+ *
+ *   get banners() {
+ *      return [this.allBanners[this.selectedIndex]];
+ *   }
+ *
+ *   previous() {
+ *     this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+ *   }
+ *
+ *   next() {
+ *     this.selectedIndex = Math.min(this.selectedIndex + 1, this.allBanners.length - 1);
+ *   }
+ * }
+ * ```
+ *
  * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
@@ -702,0 +778,0 @@ *

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2440831

0.85%

Lines of code

22312

1.51%

Worsened metrics

Number of low quality alerts

4

33.33%

No dependency changes