Stack Overflow
Stack Overflow

Questions tagged [angular-animations]

Use this tag to better reference animations in angular versions 2.0 and over or the BrowserAnimationsModule.

Angular's animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control.

To find more information :

664 questions
6
votes
0 answers

ExpressionChangedAfterItHasBeenCheckedError with animation

I have created an animation for fading in/out an image when its src changes. When I quickly switch between images (before the animation is done), I get the following error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it…
Jesper
  • 2,644
  • 4
  • 30
  • 65
6
votes
1 answer

Angular Animation which creates short highlight

Problem I recently wanted to shortly highlight an Element with Angular animations. But i did not find a way to do it without a state. So here is what i came up with: Temporary Solution animations: [ trigger('highlightRed', [ …
Joniras
  • 1,258
  • 10
  • 32
6
votes
2 answers

animateChild() for nested Angular child animation not working

I would like to fire two animations at the same time on click. The animation triggers use the same state, one is placed on an outer parent div and the other is nested within this div. The style changes are made, but the transition is applied only on…
FakeEmpire
  • 668
  • 1
  • 14
  • 35
6
votes
1 answer

Angular material tabs animation breaks when using routerLink

I'm implementing angular material tabs in my angular 6 application. If I use the material tabs without binding to routerLink then the sliding animation works and the content in router outlet works. However when I bind to routerLink the sliding…
user2173706
  • 95
  • 6
6
votes
3 answers

Set Angular animation param with Host Binding

I have been trying to set animation param using @HostBinding decorative, but it seems not to work, what am I missing animations: [ trigger('animateMe', [ state('void', style({ opacity: 0 })), transition(':enter, :leave', [ // void…
Sibiraj
  • 4,486
  • 7
  • 33
  • 57
6
votes
1 answer

How to bind animations to content children & subscribe to animation events?

I'm developing an Angular component that takes inner content and should attach animations to content children (e.g. child elements). The usage code looks like this: Side 1 …
Alexander Trakhimenok
  • 6,019
  • 2
  • 27
  • 52
6
votes
0 answers

Does angular have any method for scheduling measures and mutates of the dom?

I created an Angular issue: https://github.com/angular/angular/issues/20471 Also started a proposal in gist: https://gist.github.com/matthewharwood/23ea18c8509b8056813d3c3e7df0d1b2 Hey I was messing with the Angular/cdk directive which works…
Armeen Moon
  • 18,061
  • 35
  • 120
  • 233
6
votes
1 answer

Animating with variables Angular 4

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…
AvailableName
  • 666
  • 4
  • 13
  • 24
6
votes
2 answers

How does Angular 2/4 determine which styles to place inline prior/post an animation?

I have the following trigger in an Angular 4 component animation array: trigger('collection', [ state('0', style({ 'background-color': 'black', '-webkit-box-flex': '0', '-ms-flex': '0 0 0px', flex: '0 0 0', overflow: 'hidden', …
jpetitte
  • 610
  • 5
  • 18
6
votes
0 answers

update @HostBinding Angular 4 Animation

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…
Clay
  • 478
  • 4
  • 10
5
votes
2 answers

Angular Universal (SSR) and router animation first load / trigger

I've got a problem with Angular Universal and router animations. My case is very simple yet hard to resolve (at least for me). Universal renders an HTML document and sends it to the browser. Then angular browser app is being downloaded and when it…
BazylPL
  • 218
  • 3
  • 9
5
votes
1 answer

Angular Route Transition - Slide left or right dependent on current route?

I followed this tutorial to add route transition animations and it seems to work, but I am having more than 3 routes in my App. Now when I go to a page with animation: 'isRight' when I am currently on isLeft it works as expected, but when I am…
xDrago
  • 1,772
  • 2
  • 20
  • 37
5
votes
0 answers

Angular Animation select element outside using query

Is it possible to select an Element outside the Angular Animation Declaration using query? i have this code. Let say I do have two…
Rich
  • 3,928
  • 4
  • 37
  • 66
5
votes
0 answers

Animation doesnt work in the lazy loaded component

I am trying to make an animation to a component loaded lazily. Bellow is the code of the app module import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from…
Grei Muka
  • 111
  • 5
5
votes
2 answers

Angular 7 animations causes z-index overlapping issue on webkit browsers

I have added some staggered animations to my angular 7 app for elements to animate on page load. I have encountered this weird z-index issue on one of my components. The animation code is this: @Component({ selector: 'track-page', templateUrl:…
Jack_b_321
  • 848
  • 8
  • 22
1 2 3
…
44 45