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

Angular - How to define animation parameters default values?

I am working with Angular animations, and to improve my animation, I need to use parameters. To do so, I did as this answer suggested, with interpolation. Here is what I have for the state : state('position', style({ transform:…
br.julien
  • 3,420
  • 2
  • 23
  • 44
8
votes
2 answers

Route animation angular 4

The app I am working on requires the ability to navigate back and forth through the routes so when you navigate one way through the app in one direction the components animate from left to right, and when you navigate back they navigate from right…
Clay
  • 478
  • 4
  • 10
8
votes
1 answer

Angular 4 animation to height *

I've been puzzled with something I possibly think is a bug in the animation-module in Angular 4. With the animations in Angular 2.x, I made an animation that animates from height * to a fixed height. This worked perfectly fine in Angular 2. When…
Tallang
  • 143
  • 2
  • 7
7
votes
1 answer

Is it possible to add a CSS class on ':enter' or ':leave' events of a component/element like used with Animations in Angular 10?

With Angular Animations it's possible to add transitions/ animations to elements and their children when they enter or leave the view, like this: @Component({ animations: [ trigger('containerTrigger', [ transition(':enter', [ …
lampshade
  • 2,470
  • 3
  • 36
  • 74
7
votes
2 answers

On Click fade-out and fade-in Animation Angular

I implemented fade in fade out animation for a div element. what I want to do is something like this. when page initial renders there is div element displaying some number.the right and left side i have two-buttons. When a user clicks on one…
NicoleZ
  • 1,485
  • 3
  • 22
  • 43
7
votes
2 answers

Is it possible to animate mat-tree? (Angular Material)

I am using mat-tree (https://material.angular.io/components/tree/overview) from Angular Materials. When expanding a parent-tree-node, I want to animate the appearance and disappearance of the child-tree-nodes. Here is an example of how I would like…
Etoon
  • 306
  • 3
  • 10
7
votes
1 answer

Angular 5 Stagger Animation - How to do Reverse Order

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

angular2 transition animation is not working

I am trying to apply the angular transition to the elements but it's not working. I have added web-animation-js as well but still no effect. added the implementation on onMouseleave and onMouseover functions // package.json "web-animations-js":…
SONGSTER
  • 585
  • 3
  • 11
  • 28
7
votes
2 answers

Angular 4 animate parent and child components at the same time

I've written plunk to illustrate my issue: LINK I need to animate parent component, and at the same time I want to make some animation in child component. It seems that angular is blocking animation on child component, and then simply jumps states…
K. Kowalczyk
  • 967
  • 13
  • 34
7
votes
2 answers

Angular 2 "slide in animation" of a routed component

let's say I have 2 routed components and two Routerlinks in the fixed navbar to route them. I want them to slide in from the right when I click the Routerlinks. I don't want to offset the component with css and use a timeout function to change the…
Han Che
  • 8,239
  • 19
  • 70
  • 116
7
votes
5 answers

angular2 component transition animation

How to make page transition animation in angular2 ? I try this is code but not working @Component({ selector:'myPagefirstPage', }) @View({ template: `

First Page

…
Bahgat Mashaly
  • 510
  • 7
  • 15
6
votes
2 answers

Error: export 'ɵCssKeyframesDriver' (imported as 'ɵCssKeyframesDriver') was not found in '@angular/animations/browser'

After upgrading my Angular from 12.0.2 to 13.0.3 everything was working fine. I was trying to remove some packages that was not used such as jquery, and some other i do not remember etc. and after that I deleted node_modules, package-lock.json and…
Santosh
  • 3,477
  • 5
  • 37
  • 75
6
votes
0 answers

Angular route animation between lazy loaded modules, :leave component disappears instantly

I can't get route animations to work correctly when routing between lazy loaded modules. AppModule: [HomeComponent, AboutComponent] LazyModule: [ Lazy1Component, Lazy2Component] When changing between components of the same module (e.g. Home >…
Olivier Bright
  • 61
  • 2
6
votes
1 answer

Angular 8 Animations Error on Lazy Loaded Module - Found Synthetic Property

I have 2 modules, the app.module and a lazy.module. As you can imagine, the lazy.module is lazy loaded into the app.module via router. const routes: Routes = [ { path: '', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)…
A. Dixon
  • 187
  • 3
  • 17
6
votes
4 answers

Is it possible to disable mat-tab animations with pure css

I want to disable the Angular Material mat-tab animation (the animation that occurs as the content slides into place). I know it is possible to use the [@.disabled] attribute but I wonder if it is possible to achieve the same effect with pure…
cfr
  • 135
  • 1
  • 1
  • 9
1 2 3
…
44 45