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

How to create and structure correctly in the animation project with Keyframe?

I just created a component that is a "loading" and it contains animations in the "spinner". If it were in the old days I would create a .scss in assets and insert @import in the component, but as I am in the Angular 9x, I also decided to update…
user11472365
3
votes
0 answers

Animate row on change or add

I'm trying to animate a row in mat-table when it's added or when it's changed. I have the following animations: import { animate, keyframes, sequence, style, transition, trigger } from '@angular/animations'; export const rowUpdate = …
SantiSori
  • 381
  • 2
  • 15
3
votes
1 answer

Show or Hide div to the left using Angular Animation

I am showing mat-dialog with 600px height and width. I have a button in mat-dialog. When I click on button, I want to show the left sliding div from the left side of mat-dialog without effecting mat-dialog. How can I do this?
Chatra
  • 2,989
  • 7
  • 40
  • 73
3
votes
1 answer

Angular CDK: Apply animations to Angular custom stepper on step change

I am stuck with animating the step change of the Angular material custom stepper using the CDK. I have followed the tutorial on how to implement the custom stepper. I have the demo here My template looks like:
…
Thabo
  • 1,303
  • 2
  • 19
  • 40
3
votes
0 answers

angular material - animation transition start state is not updated after sorting the material table

Animation transition start state is not updated after sorting on a column in the table. I have the code running here - stackblitz Steps to reproduce - Immediately after page load, click on "sysbol" header to sort the table Click on the first…
Nithin Kumar Biliya
  • 2,763
  • 3
  • 34
  • 54
3
votes
1 answer

Animate sibling element

In my app I've 2 sibling element. One element is hidden and I can toggle it's visibility by button. I've added an animation, when this hidden element become visible. The problem is, the sibling element doesn't animate. It just jumps to it's new…
Runtime Terror
  • 6,242
  • 11
  • 50
  • 90
3
votes
2 answers

How to animate an image on a click using angular-animations

This animation works when the page loads,But I need to animate this image on a button click
animatepic
Udith Shalinda
  • 487
  • 1
  • 8
  • 20
3
votes
1 answer

Angular7 router-outlet animations skews and rearranges all elements making a mess

I've been trying out about 5 implementations of router-outlet animations. I just want a basic fade-in/fade-out animation when the route changes, nothing fancy. Here's a screen-recording of how things look when I switch route:…
SebastianG
  • 8,563
  • 8
  • 47
  • 111
3
votes
2 answers

How to intercept :enter & :leave Animations in Angular with a changes Diff?

I have a list in my template, where the first 3 items will be shown and the rest is in a collapsible, i.e. within a 'show more' link. item1 item2 item3 Show More Here is how it looks when you click Show More: item1 item2 item3 item4 item5 Show…
akcasoy
  • 6,497
  • 13
  • 56
  • 100
3
votes
0 answers

How can you animate the change of the `srcset` attribute in a picture element?

I'm having a simple picture element with three sizes. …
Stefan
  • 14,826
  • 17
  • 80
  • 143
3
votes
1 answer

Angular - Animate outside element on route change

I have two components that already have a working fade out/in animation on route change, and an outside background-image that fades in from a black background(done in css) on page-load. app.component.html
Andrew Chow
  • 31
  • 2
3
votes
2 answers

Animation doesnt keep final state, switches back to original state

I'm learning Angular 6 at the moment and ran into a bit of a problem. I'm using this tutorial: https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html When i click the button, the animation triggers as expected, but after the fade out…
SHRX
  • 559
  • 1
  • 6
  • 17
3
votes
2 answers

Angular animation: respond to numeric value change

I want to rotate an image based on a value from a slider using Angular animation. I can get the animation triggered using value change notifier :increment & :decrement. But can't use the latest value in the css properties in animate style block. My…
Sanky
  • 193
  • 13
3
votes
0 answers

How to provide infinite animations through AnimationPlayer or AnimationReferenceMetadata (alternatives wanted)

I have a AnimationPlayer defined animation according a specified AnimationReferenceMetadata definition. Some thing like this : const base: AnimationMetadata[] = [ style({ opacity: `{{startOpacity}}` }), animate( `{{duration}} {{delay}}…
daan.desmedt
  • 3,752
  • 1
  • 19
  • 33
3
votes
1 answer

Angular 5 parent and child animations not working at the same time

I'm trying to create side menu with additional animation for inner arrow element: https://stackblitz.com/edit/angular5-menu-animation In this realization animations are working in the next order: Menu is opening Arrow is rotating But I want to…
daslashi
  • 357
  • 1
  • 3
  • 13
1 2 3
…
44 45