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
5
votes
2 answers

Angular 5 Animation: How to work with :leave transition while the component is removed from DOM

We have been using @ng-bootstrap/ng-bootstrap library in our project for some behaviours/components like Modal. Recently i wanted to eliminate that dependency and implemented the bootstrap modal behaviour with Angular. It was actually pretty easy.…
akcasoy
  • 6,497
  • 13
  • 56
  • 100
5
votes
1 answer

Make parent animation wait for Child animation to finish in Angular

I have a full screen navigation that takes over the screen. The contents of the menu (child) I'd like to appear after the overlay (parent) has entered. This I have gotten to work. However, the leave transition is the issue. I can't get the child to…
Connor G Roane
  • 153
  • 2
  • 2
  • 10
5
votes
0 answers

Angular Animation on child animation not transitioning

I have a child animation nested inside of my parent animation. The parent animation is preventing the child from transitioning. The change is triggered, but there is no transition. How do I make this transition happen and both animations trigger at…
FakeEmpire
  • 668
  • 1
  • 14
  • 35
5
votes
1 answer

Angular page transition animation of specific items

I would like to make route transition, but not simple slide out/slide in animations. I am looking for animation like this one on left ( https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif ) I know how to animate routes that will…
5
votes
2 answers

Angular 5: Route animations for navigating to the same route, but different parameters

In my Angular 5 application, the user may navigate to a route which uses the same route, but with different parameters. For example, they may navigate from /page/1 to /page/2. I want this navigation to trigger the routing animation, but it doesn't.…
Nigel Nelson
  • 110
  • 1
  • 9
5
votes
1 answer

Trigger animation every time array changes using Angular 4

Need to trigger animation every time the array changes I am currently iterating over an array of products using *ngfor and everytime the length changes the animation will trigger. I am using Angular 4.
5
votes
0 answers

Are Triggers and States available when using AnimationBuilder, AnimationPlayer Angular4?

Thank you for reading my question (it's my first). My end goal is to have a button that starts and stops animation and a slider (right now a textbox) to adjust speed. I have working code for starting and stopping animation I also have partially…
5
votes
1 answer

Angular 2 Animations "Failed to execute 'animate' on 'Element': Partial keyframes are not supported."

I've created the following Angular 2 animation: trigger('detailsContentAnimation', [ state('1', style( { 'height': '*', 'padding-top': '*', 'padding-bottom': '*' })), state('0', style( { …
Thomas Gassmann
  • 737
  • 1
  • 13
  • 27
5
votes
2 answers

Angular 2 Staggering Animation

Angular 2 RC2 just came out and I am wondering whether it already supports staggered animations for *ngFor? The DSL language documentation mentions group and sequence but no stagger of any kind? Is staggered animation not included in RC2?
sqwk
  • 2,649
  • 1
  • 28
  • 42
4
votes
1 answer

Argument of type 'AnimationEvent_2' is not assignable to parameter of type 'AnimationEvent'

I'm trying to make animation callback in angular, and got type error which is easily can be suppressed with type any. I want to understand why AnimationEvent is not accepted by typescript. My component: import { Component } from…
Yuriy Gyerts
  • 1,464
  • 18
  • 30
4
votes
1 answer

Disable animation on initial view / page load : Angular

I have added Enter and Leave animation in my Angular component. Where I am animating the height of a div based on a boolean variable. The animation is working fine but Is there a way to turn off animation on the initial view load? Component.ts …
RAHUL KUNDU
  • 745
  • 2
  • 12
  • 33
4
votes
0 answers

Angular animation transform x based on other elements position

I have defined an angular animation like this trigger('sampleAnimation',[ state('selected', style({ transform: 'translateY(-90%) ' })), state('normal', style({ transform: 'translateY(*)' })), transition('normal <=>…
Shofiqul Alam
  • 585
  • 1
  • 7
  • 29
4
votes
1 answer

How to animate elements on array insertion Angular?

I'm a real newbie in angular animations, never had to use anything else than simple transitions until now. I think what i'm looking for is very simple, yet I can't figure out what I'm missing. I have an array displayed in template with ngFor. I can…
Lozah
  • 71
  • 1
  • 7
4
votes
0 answers

Angular Nested Router Outlets Animation

I am trying to add router animations to a couple of routes in my Ionic App. Due to nesting complexity (3 levels of nesting), Ionic built-in solution ion-router has erratic behavior. So the first level follows as such const routes: Routes = [ …
4
votes
1 answer

Animate ng-container

I'm working on a bigger app, where we are using lazy loading for modules. After we load a module, then in some cases a component get rendered to a . The problem is, the animation which is defined on container is not…
Runtime Terror
  • 6,242
  • 11
  • 50
  • 90