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

Edge & IE not respecting overflow-y in angular animation

I've made the following angular animation for my app so be able to vertically expand/collapse elements. It works, but it seems the Edge and IE do not apply the overflow-y during the animation which makes it look all wonky. import { trigger,…
Chris Barr
  • 29,851
  • 23
  • 95
  • 135
2
votes
0 answers

Is there any way to bind angular animation to structural directive

I've created simple 'slider' structural directive in angular. Is there any way to make it alive with animations, how can I bind some animation to my private next() and prev() functions so when the user clicks next or prev content will smoothly go…
Rafayel Arakelyan
  • 33
  • 3
2
votes
1 answer

Angular: group() function does not run animation in parallel, disrupts animation flow

I was trying to implement this login form with angular animations for practice purposes. I want the cross to rotate while the circle moves to the middle. So i need the movement and the cross rotation to happen at the same time. I tried creating a…
Lukas Kurz
  • 85
  • 9
2
votes
0 answers

Animation :enter :leave not firing for @ngIf inside ng-content

So I have this component. Let's call it AnimationComponent:
…
ykadaru
  • 1,108
  • 2
  • 16
  • 32
2
votes
1 answer

Router Navigation SlideIn Animation not working

I am trying to implement slideIn animation while the router navigates. I have read some documentation and implemented the code in sample application. I don't see any errors, but the animation is not working. Please guide me where I am…
Muthu
  • 808
  • 1
  • 9
  • 23
2
votes
3 answers

angular animation in ionic with trigger on keyboard event not working properly

In my Ionic application I need to animate the ion-content element with Angular animation when the keyboard appear/disappear. I have the following code: and @Component({ selector: 'page', …
AleCat83
  • 1,443
  • 3
  • 22
  • 41
2
votes
0 answers

angular animations multiple triggers not working

I am using angular animations and have 2 triggers but only the first trigger works, even when switched around, I've tried to discover why but can't figure it out. My last thought is that maybe because one of the triggers is a child element of…
DevStacker
  • 675
  • 10
  • 23
2
votes
0 answers

Angular animation and staggering display: none

This code is currently working for me but I got to this solution from trial and error and playing with the stagger() method. Is there a cleaner way to implement this? Ideally I'd just use an *ngIf but the elements are image heavy and the opacity…
Reed
  • 1,515
  • 1
  • 21
  • 38
2
votes
1 answer

How do I run code after Angular animations?

I have set up a slide animation in Angular 7 when changing the route. The problem I have right now is that the animation is stuttering, because the Component that I'm navigating to is executing code during the animation in the OnInit lifecycle. How…
HitomiTenshi
  • 514
  • 2
  • 6
  • 20
2
votes
0 answers

Angular Route-based Animations: Issue with Nested Routes

I'm trying to implement a slide-in/slide-out animation when the route changes. I've created a minimal reproduction of my setup here: https://stackblitz.com/edit/angular-ueeuyd I have a 3-level hierarchy of routes: Cuisines -> Dishes -> Recipe Each…
Krishna Chaitanya
  • 397
  • 4
  • 14
2
votes
0 answers

Angular 6 animations on :increment and :decrement not triggering correctly

trying to wrap my head around animating a list of items where users can move items up and down, one at a time, one step at at a time. I got all excited when the documentation started talking about :increment and :decrement selector values. However,…
Eric Liprandi
  • 5,324
  • 2
  • 49
  • 68
2
votes
1 answer

How to make test case for angular animations

I use karma to write angular2 test cases, but have no idea how to test animations. I tried to get and check the transform attributes of host element, but got 'none', neither the 'getCalculateStyle()' method can work. Any suggestions? Example code…
PWan
  • 93
  • 1
  • 9
2
votes
0 answers

Angular 6, Default animation params not working

I've a component with an "@Input" property that receives the timing of an animation, while the timing property has a value all works as expected, but if a leave the timing without value the animation doesn't take it's default timing value. This is…
Danny908
  • 421
  • 2
  • 6
  • 20
2
votes
1 answer

Angular Stagger Animation for multiple new elements

I'm trying to have a stagger animation in a list. Up till now I have managed to have the stagger animation on load. Apart from on load I'd like to have the stagger animation trigger when new items are added to the array. I followed this example:…
Daniel Grima
  • 2,765
  • 7
  • 34
  • 58
2
votes
1 answer

Angular 6 Router Transition Animation doesn't work (Nav bar)

I am trying to implement Fade transition on my router outlet - whenever you move to a page you get fadein/out. However it just doesn't seem to work at all, the router outlet is in the main area of the navigation bar: Stackblitz of my app See…
makat
  • 154
  • 1
  • 3
  • 14
1 2 3
…
44 45