Angular 4.3.6 animations not working properly
Angular seems to fix issues with animation after version 4.4.1. Updating to 4.4.1 should resolve the issue.
Angular seems to fix issues with animation after version 4.4.1. Updating to 4.4.1 should resolve the issue.
The square brackets are not necessary with @HostBinding() @HostBinding(‘@slideIn’) get slideIn() { There are two decorators @HostBinding() and @HostListener() therefore the distinction between () and [] isn’t necessary, while it is when host: […] is used.
Perform below steps to make it work: npm install @angular/animations@latest –save import “BrowserAnimationsModule” from “@angular/platform-browser/animations” in your root NgModule (Without this, your code will compile and run, but animations will trigger an error) In your component use imports from the new package like this – ” import { trigger, state, style, transition, animate } from … Read more
Now it’s possible. animations: [ trigger(‘flyInOut’, [ state(‘for’, style({ left: ‘{{left_indent}}’, // use interpolation }), {params: {left_indent: 0}}), // default parameters values required transition(‘* => for’, [ animate(2000, keyframes([ style({ opacity: 1, transform: ‘translateX(0)’, offset: 0 }), style({ opacity: 1, transform: ‘translateX(-300px)’, offset: 0.5 }), ])) ]), ]) ] UPDATE (according to SplitterAlex answer): in … Read more
As the name noop (“no operation”) says, that module doesn’t do anything. It is a utility module that mocks the real animation module but doesn’t actually animate. This can be handy on platforms where animation would be too slow, or for testing (unit, integration, e2e with Cypress, Protractor, …) , if animation isn’t involved in … Read more
First some code, then the explanation. The official docs describing this are here. import { trigger, transition, animate, style } from ‘@angular/animations’ @Component({ … animations: [ trigger(‘slideInOut’, [ transition(‘:enter’, [ style({transform: ‘translateY(-100%)’}), animate(‘200ms ease-in’, style({transform: ‘translateY(0%)’})) ]), transition(‘:leave’, [ animate(‘200ms ease-in’, style({transform: ‘translateY(-100%)’})) ]) ]) ] }) In your template: <div *ngIf=”visible” [@slideInOut]>This element will … Read more
So I did some research and although I didn’t find any argument for nor against Angular animations performance-wise (as already stated in the question above), there are very good arguments to use Angular animations feature-wise which should be good enough for purists who want to have CSS only in sheets, at least in certain cases. … Read more
update 4.1.0 Plunker See also https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24 update 2.1.0 Plunker For more details see Animations at angular.io import { trigger, style, animate, transition } from ‘@angular/animations’; @Component({ selector: ‘my-app’, animations: [ trigger( ‘enterAnimation’, [ transition(‘:enter’, [ style({transform: ‘translateX(100%)’, opacity: 0}), animate(‘500ms’, style({transform: ‘translateX(0)’, opacity: 1})) ]), transition(‘:leave’, [ style({transform: ‘translateX(0)’, opacity: 1}), animate(‘500ms’, style({transform: ‘translateX(100%)’, opacity: … Read more
Make sure the @angular/animations package is installed (e.g. by running npm install @angular/animations). Then, in your app.module.ts import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’; @NgModule({ …, imports: [ …, BrowserAnimationsModule ], … })