angular-animations

问题 i have a sub component like this @Component({ selector: 'is-time-controlled', templateUrl: './is-time-controlled.html', styleUrls: ['./is-time-controlled.less'], animations: [ trigger( 'myAnimation', [ 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':

问题 I have a parent component with a nested child component, both have :enter and :leave animations. To run both animations in parallel I use group() and animateChild() functions. But, if the parent animate() call is located inside group() call, the parent state transition isn't animated. animations: [ trigger('child', [ state('void', style({ opacity: 0 })), transition('void <=> *', animate('1750ms ease-in')) ]), trigger('parent', [ state('void', style({ height: 0 })), transition('void <=> *',

问题 While working with Angular CDK and developing a custom component, I am trying to implement stagger animation with ngIf and ngFor . The animation is a sequence of simple fade in. The following simplified HTML: <button (click)="visible = !visible">Toggle</button> <div class="parent" @parentAnimation *ngIf="visible"> <p class="child">Child 1</p> <p class="child">Child 2</p> <p class="child">Child 3</p> </div> And Component: @Component({ selector: 'my-app', templateUrl: './app.component.html',

问题 I have two routed components and their container to which I've set an animation trigger, @slide , wherein I query for each and animate accordingly. <div [@slide]="o.activatedRouteData.name"> <router-outlet #o="outlet"></router-outlet> <div> RouterModule.forRoot([ { path: '', component: HomeComponent, data: { name: 'home' } }, { path: 'login', component: LoginComponent, data: { name: 'login' } } ]) trigger('slide', [ transition('login => home', [ query('home', style({ left: '-120%', right:

问题 I added an animation to my component in Angular. However the animation WORKS FINE in Chrome and Firefox, but in IE Edge the animation is NOT triggerd although the styles are applied correctly on state change, but just without specified animation. Does anyone have the same issue? Here is my code: animations: [ trigger('rowState', [ state('collapsed', style({ 'height': 0, 'overflow-y': 'hidden' })), state('expanded', style({ 'height': '*', 'overflow-y': 'hidden' })), transition('collapsed <=>

问题 I'm trying to create side menu with additional animation for inner arrow element: https://stackblitz.com/edit/angular5-menu-animation In this realization animations are working in the next order: Menu is opening Arrow is rotating But I want to start this 2 animations at the same time. It works good in Angular 4.4.x but not working in 5.2.x. Need some help with this issue. 回答1: You can check my working fork here. You have to add the group function so that the steps are executed in parallel

问题 I am creating a paging component that slides to next or previous fullscreen page. Because issues with different browsers and devices I have abandoned just using CSS transitions for now. I have a working angular animate solution but the new problem is that it doesn't scale. import { Component } from '@angular/core'; import { animate, state, style, transition, trigger } from '@angular/animations'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app

问题 I'm getting this error after importing NoopAnimationsModule for my Angular 6 app ERROR TypeError: this.driver.matchesElement is not a function at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.processLeaveNode (browser.js:2976) 回答1: This happened to me a few hours ago, and was probably caused by some outdated modules. Running npm update --save fixed it. 回答2: @angular/core and @angular/animations should be same version. Especially

问题 I'm getting this error after importing NoopAnimationsModule for my Angular 6 app ERROR TypeError: this.driver.matchesElement is not a function at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.processLeaveNode (browser.js:2976) 回答1: This happened to me a few hours ago, and was probably caused by some outdated modules. Running npm update --save fixed it. 回答2: @angular/core and @angular/animations should be same version. Especially

问题 I'm using @angular/animations: 4.4.6 to try and have an expand/collapse animation for a component that will display lots of text. As a default it will display a certain amount of text, but different parent components can define a different collapse height. From what I can tell, I'm doing everything right. But the animations decorator is ignoring the input, and going directly for the default value. import { AUTO_STYLE, trigger, state, style, transition, animate, keyframes } from '@angular