Sharing Top Content from the Angular-sphere.

What’s new in Angular v5: Animations – Netanel Basal

  • In this article, I want to explore what’s new in animations.Negative limits in queryAnimation queries now support negative limits, in which case will be matching elements from the end rather than from the beginning.For Example:animations: [ trigger( ‘query’, [ transition( ‘* = start’, [ query(‘.
  • item’, [style({ opacity: 0 }), animate(‘2s’, style({ opacity: 1 }))], { limit: -3 }), ]), ]),]Improved disabled propertyThe @.
  • When the expression is missing it will treat the property as true.For example:// Animation will be disableddiv @.
  • disabled div error handlingAngular now throws an error when invalid CSS property is used in the animation.For example:style({opacity: 0, tranforn: ‘translateX(0)’})Will throw:consoleNew aliasesSupport for :increment and :decrement transition aliases.
  • 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.For example:animations: [ trigger(‘slider’, [ transition(“:increment”, group([ query(‘:enter’, [ style({ left: ‘100%’ }), animate(‘0.5s ease-out’, style(‘*’)) ]), query(‘:leave’, [ animate(‘0.5s ease-out’, style({ left:…

Angular version 5 is here and with her a new wave of features. In this article, I want to explore what’s new in animations. Animation queries now support negative limits, in which case will be…

What’s new in Angular v5: AnimationsAngular version 5 is here and with her a new wave of features. In this article, I want to explore what’s new in animations.Negative limits in queryAnimation queries now support negative limits, in which case will be matching elements from the end rather than from the beginning.For Example:animations: [ trigger( ‘query’, [ transition( ‘* = start’, [ query(‘.item’, [style({ opacity: 0 }), animate(‘2s’, style({ opacity: 1 }))], { limit: -3 }), ]), ]),]Improved disabled propertyThe @.disabled property now work without an expression. When the expression is missing it will treat the property as true.For example:// Animation will be disableddiv @.disabled div error handlingAngular now throws an error when invalid CSS property is used in the animation.For example:style({opacity: 0, tranforn: ‘translateX(0)’})Will throw:consoleNew aliasesSupport for :increment and :decrement transition aliases. 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.For example:animations: [ trigger(‘slider’, [ 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%’ })) ]) ])) ])]Follow me on Medium or Twitter to read more about Angular, Vue and JS!

What’s new in Angular v5: Animations – Netanel Basal