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
4
votes
1 answer

Angular 4 animation on children: style jumps back

I want to fade out an element's child, by animating its opacity. It's working fine, but at the end of the animation, the child's style is reverted back to it's original state (opacity un-set). How can this be prevented / how can I tell Angular to…
Hoff
  • 38,776
  • 17
  • 74
  • 99
4
votes
2 answers

Angular 4 animation for fade in and out a view

I just want the view to fade in and out on route change. I have setup the component correctly it seems but need to get the animation syntax correct I think. This is my current animation attempt. I import this animation to my component: import…
AngularM
  • 15,982
  • 28
  • 94
  • 169
4
votes
3 answers

Angular 4 component responsive animations

I am working on an Angular responsive app, which on mobile it has a drawer. I love Web Animations API implementation in Angular, but I can't find a place where I can configure animations based on my media-queries breakpoints. All I can find is…
neoswf
  • 4,730
  • 6
  • 39
  • 59
4
votes
0 answers

Importing BrowserAnimationsModule breaks my .NET Core & Angular app

I've been browsing SO and various other sites for about 4 hours now trying to figure out how to fix this, but I can't seem to find any solution that allows me to load the page, other than a solution that breaks prerender. it was suggested to…
nGAGE
  • 177
  • 1
  • 11
4
votes
2 answers

animation on angular 4 doesn't seem to have transition effect

trigger('expandCollapse', [ state('open', style({ 'height': '*' })), state('close', style({ 'height': '0px' })), transition('open <=> close', animate(1000)) …
Richie Fredicson
  • 2,150
  • 3
  • 16
  • 19
4
votes
1 answer

Angular 4 Dynamic Height Animation Reverts After Animation

I'm working with Angular4 and their animation. I'm trying to pass dynamic values to an animation declaration but it revers to it's original state after the animation finishes. Basically, I have a dynamic height that will then trigger the animation…
Miguel Felipe Guillen Calo
  • 1,503
  • 2
  • 11
  • 15
4
votes
2 answers

Angular Router animation timing errors

I have recently updated my Angular app to 4.0 in order to take advantage of the animation between routes. Below is my animation function: export function routerTransition() { return trigger('routerAnimations', [ transition('home =>…
adamjesmith
  • 55
  • 4
3
votes
0 answers

Angular 15 ng serve error with ANIMATION_MODULE_TYPE

As the title says. I've been struggling with this error for hours. Like 30 files print this when I try ng serve: ./node_modules/@angular/material/fesm2020/button.mjs:239:156-177 - Error: export 'ANIMATION_MODULE_TYPE' (imported as…
user3267841
  • 51
  • 5
3
votes
2 answers

Angular 11, :enter and :leave animation not working with *ngIf

I just started with Angular animations. And wan't to animate a *ngIf with it. Sadly it does't work :(. I don't get an error message. I tried several solutions from here, nothing worked. Also removing one of the animations doesn't change anything or…
Marcel Bührig
  • 105
  • 2
  • 11
3
votes
0 answers

Angular - Animating Parent Height Based on Conditionally Rendered Children (ngIf)

I have a list of elements I want to render in Angular, and each element have conditional rendering based on them. The idea is that when they render in or out, the parent div height transitions smoothly. I am using ngFor to render each point for a…
Makan Azarshahy
  • 143
  • 2
  • 9
3
votes
1 answer

Angular animation: first fadeout, then fadeIn

I have the following HTML
State is true
State is false
And I want to animate the :leave and :enter transition. Very trivial I…
Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
3
votes
1 answer

Angular animations don't work inside mat-tabs after switching back

I'm trying to get a simple :enter/:leave animation to work on a mat-list inside a mat-tab. The initial animation is no problem, the problem occurs when switching to a different tab and returning to the first one. That time the animation doesn't get…
Olafvv
  • 87
  • 12
3
votes
0 answers

Angular10 - Safari error: "The provided animation property 'offset' is not a supported CSS property for animations

I'm using @angular/animations, but when i use the property "offset" in order to make a stagger effect, in Safari blocks the execution of the entire website. After having removed it, it start running correctly again. This is my piece of…
Arianna
  • 345
  • 1
  • 4
  • 10
3
votes
2 answers

Angular.io v8: animate object and query()-children simple and together

I lack some understanding, how Angular.io (V8) animation works: I want to animate a base object and its children: https://stackblitz.com/edit/angular-yrxvby
Frank N
  • 9,625
  • 4
  • 80
  • 110
3
votes
1 answer

Safari ignores angular animations timing function

I'm trying to build a animation with angular animations, but if I choose a custom cubic-bezier timing function, it sometimes gets ignored in safari. Here is my example code of the problem: https://stackblitz.com/edit/angular-ivy-qyj9rv You can see…
David van der Sluijs
  • 49
  • 3
1 2 3
…
44 45