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

Can't get animations to work with md-tab-nav-bar/md-tab-link

I switched from MdTabGroup to the md-tab-nav-bar/md-tab-link directives in order to be able to assign routes to individual tab pages. Unfortunately though, I lost the slide-in animation in the process (there appears to be no animation for the…
Thorsten Westheider
  • 10,572
  • 14
  • 55
  • 97
18
votes
2 answers

Angular animations as a separate file not in-lined

I've been fiddling with Angular animations and was wondering if there's a best/recommended way to avoid inline styling ... for instance, @Component({ selector: 'page-that-needs-anime', templateUrl: './anime.component.html', styleUrls:…
Bi Yoo
  • 249
  • 4
  • 9
17
votes
3 answers

Angular how to delay/stagger the animation inside of child components

I have a child component with animations child.component.ts @Component({ selector: 'child', animations:[ // animations ] }) export class ChildComponent { ... } And a parent component, which has 2 of the child components in the…
Flyii
  • 1,105
  • 1
  • 12
  • 21
17
votes
4 answers

Angular NoopAnimationsModule Type Error matches Element is not a function

I'm getting this error after importing NoopAnimationsModule for my Angular 6 app ERROR TypeError: this.driver.matchesElement is not a function at…
ThilanCosta
  • 171
  • 1
  • 5
17
votes
1 answer

Angular2 bind animation to pseudo element

I am trying to use Angular2 animation system, for a pseudo element :before. As per animation flow, I need to define animation state: animations: [ trigger('heroState', [ state('inactive', style({ backgroundColor: '#eee', transform:…
Yuvals
  • 3,094
  • 5
  • 32
  • 60
16
votes
1 answer

Transitions in Angular

I have created a Layout Manager in Angular which can take in Components and then Display it in View and add animations to it while each component is shown in View and Goes out of view . At a single instance of time either one panel or max of two…
Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
16
votes
3 answers

MatSort breaks MatTable detail row animations

I've been beating my head against this problem for quite a while before I got here. Essentially, I have an Angular Material table that uses animations to create a detail row. When the table sorts, it rearranges the data. Some of the detail rows have…
Julia Norman
  • 193
  • 1
  • 11
14
votes
3 answers

Slide down animation Angular 4

I am trying to animate my page but have the following issue: I have content div on my page, and a button that opens another div above the content. I would like that div to fade and slide in, and the div bellow to slide down/up as well. I created…
Nemanja Grabovac
  • 858
  • 2
  • 15
  • 30
14
votes
2 answers

How can I animate *ngFor in Angular?

I need to animate an ngFor list as it is populated and shown. Each element should have a transition, let's say something like this. How can I do that?
Nicu
  • 3,476
  • 4
  • 23
  • 43
13
votes
2 answers

Repeat animation angular 4

I created the following animation: fade.animation.ts: import { Component } from '@angular/core'; import { trigger, state, animate, query, transition, style, stagger } from '@angular/animations'; export let fade = trigger('fade', [ state('void',…
ararb78
  • 1,137
  • 5
  • 19
  • 44
12
votes
3 answers

How to animate :enter & :leave transitions conditionally in Angular?

I have a list, where the items have an animation like this:
  • And this is my animation trigger: trigger('animation', [ transition(':enter', [ style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0'}), // initial …
    • akcasoy
    • 6,497
    • 13
    • 56
    • 100
    12
    votes
    1 answer

    Angular animation : Rotation 180° click image

    How to make a image rotation (click : 0° -> 180° / click again : 180° -> 0°) on image button with Angular 4 ? I use Angular Material too. This is my button :
    11
    votes
    1 answer

    Angular Animations: Animate Parent and Child Elements

    I created an element (div.parent) with an Angular animation that worked great. When I add a child element to it and try to animate the child at the same time, one of the animations doesn't end up running (it just snaps to the new…
    Chris Voth
    • 853
    • 5
    • 13
    • 22
    11
    votes
    2 answers

    Angular animation not working in IE edge

    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…
    Haris
    • 133
    • 1
    • 5
    10
    votes
    3 answers

    Angular router transition animations slide both left and right conditionally

    I have read this article about Router transition Animations for Angular: https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8 And: Angular 2 "slide in animation" of a…
    Dolan
    • 1,519
    • 4
    • 16
    • 36
    1
    2
    3
    …
    44 45