angular-animations

I would like to know if there is a way to bind the animation trigger name dynamically in the template. Here is the div to animate in the template app.component.html : <div [@animationTriggerName]> ... </div> Here is the app.module.ts : ... @NgModule({ imports: [...], declarations: [ ..., AnimationTriggerNameDirective ], bootstrap: [...] }) And here is the app.component.ts : @Component({ ... }) export class AppComponent { ... animationTriggerName = 'slideInOut'; } @Directive({ selector: '[animationTriggerName]' }) export class AnimationTriggerNameDirective { @Input() animationTriggerName:

What is the bare minimum and Angular4 's native way to slide in and slide out a container element? e.g. <div ngIf="show"> <!-- Content --> </div> Slide In Content (from top to down just like jQuery. slideDown ()) when show turns to true . Slide Out Content (suitably with ease-out effect) when show turns to false . First some code, then the explanaition. 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%)'}),

With the new Angular-Material release, you need to add a module for Angular-Animations. You can choose between two BrowserAnimationsModule and NoopAnimationsModule. The official guide states: Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app. npm install --save @angular/animations import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ...

I'm creating a webpage having full page width/height div's. While scrolling down I've two types of methods. Scroll on Click //HTML <a (click)="goToDiv('about')"></a> //JS goToDiv(id) { let element = document.querySelector("#"+id); element.scrollIntoView(element); } Scroll on HostListener @HostListener("window:scroll", ['$event']) onWindowScroll($event: any): void { this.topOffSet = window.pageYOffset; //window.scrollTo(0, this.topOffSet+662); } 1. How to add a scrolling animation effects? Just like : $('.scroll').on('click', function(e) { $('html, body').animate({ scrollTop: $(window).height()

I need to animate an ngFor list as it is populated and shown. Each element should have a transition, let's say something like this . How can I do that? Günter Zöchbauer It has a few issues because ngFor does a few redundant add/removes which cause items to be animated which shouldn't: import {Component} from 'angular2/core'; import { Component, Directive, OnDestroy, Input } from 'angular2/core'; @Component({ selector: 'my-app', template: `<div (click)="$event.preventDefault()"> <button type="button" (click)="pushItem()">Push</button> <button type="button" (click)="removeItemLast()">Remove Last

I'm trying to make a simple animation like the simple jQuery below animate({'left' : left_indent}) I'm using the Angular2 Animations but the problem is how do I pass the left_indent parameter outside my Component Class in to the animation trigger? animations: [ trigger('flyInOut', [ state('for', style({ left: this.left_indent, })), transition('* => for', [ animate(2000, keyframes([ style({ opacity: 1, transform: 'translateX(0)', offset: 0 }), style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }), ])) ]), ]) ] Now it's possible. animations: [ trigger('flyInOut', [ state('for',