angular-animations

问题 I am trying to get animation between routes working in an Angular 4 project - but need to be able to alter the direction of the animation (translateX) based on the way the user is navigating through the app. I have discovered that the only way to keep both the entering and exiting components in the DOM is to use void state. Also, I have to bind the animation to the host element. If I try and bind it to an element within the component the exiting component is just replaced with the entering

问题 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 . 回答1: First some code, then the explanaition. The official docs describing this are here. import { trigger, transition, animate, style } from '@angular/animations' @Component({ ...

问题 I basically have a App which renders a small map. On this page is also a "toggle" button which hides the small map with a *ngIf in the parent component and displays the map in large instead. If I now import BrowserAnimationsModule in app.module.ts the large map is not rendered if I click on the toggle button (only if i set a timeout of 1ms before the map is created in ngOnInit of map-base.component.ts). Sorry..it's a bit hard to explain, here's the code: App.module.ts ... @NgModule({

问题 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? 回答1: 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"

问题 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)

问题 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)

问题 What is the proper way of integrating web animations js in an angular 2 project? I have done the necessary steps provided here. But the animations in firefox are still choppy. I have created a new angular project using the latest angular cli (version: 1.0.3) and downgraded angular version by editing dependencies in package.json. The animation is working properly in chrome. Is there something I'm missing here? Package.json - "dependencies": { "@angular/common": "~2.4.1", "@angular/compiler": "

问题 In my Angular project (v6) have a table as shown below and I list the records by checking index numbers of them. I want to display all the records on the first page (5 records) and animate using Angular-Animations only the first record. The following example displays all records with animation (but I just want to animate the first row). <ng-template pTemplate="body" let-row let-i="rowIndex"> <tr *ngIf="i==0" [@fadeInOnEnter]> <td> <a [routerLink]="['/detail/']">{{ row.Title }}</a> </td> <!--

问题 Enter animation is working fine, but the leave animation is not working. if I move the @modalFadeZoom to parent both transitions works, but the problem with that is the scaling is not happening from center of the modal, which is giving weird animation. If i move @modalFadeZoom to the child the fade in zoom out is working fine. but no fade out and zoom in on closing the model. component html <div class="modal-dialog" *ngIf="showModal"> <div class="modal-content" [@modalFadeZoom]> <div class=

问题 Anyone know how to catch onDone callback for new animation system in angular2? There is an animation - and I want to do some stuff onDone ... I saw in sources of angular2 this method at AnimationPlayer interface, but nothing has been exposed to users... With best regards! Very appreciate yours answers! 回答1: With the forthcoming RC6 release this will be supported via (@animation.done) : https://github.com/angular/angular/commit/45e8e73670b96387fc109921fad299742d3f7cbf 回答2: Have you tried