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

angular reset transition state after animation

So I've got this: animations: [ trigger('shake', [transition('* => *', /* some animation */)]) ] And When I click it, I set shake to true. When I click it again, I want the button to shake…
Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
4
votes
0 answers

Angular buildOptimizer breaking bootstrap carousel transition effects

I'm working with Angular 7 and Bootstrap typeahead "^3.3.6" carousel (change the version is not an option.). When I include the option: buildOptimizer in angular.json the Carousel Transition effect stops working I already read this solution but I…
Abel Valdez
  • 2,368
  • 1
  • 16
  • 33
4
votes
0 answers

Angular 6 - Animation does not transition. It just jumps directly to state

I am trying to get two animations to activate at the same time. It's a big project, so I will only display the Component's HTML and Typescript files in question. The first animation is to fade in an opaque black overlay. That works perfectly fine.…
Chosen1
  • 279
  • 4
  • 18
4
votes
0 answers

Only first new item is animated after adding to list

So my issue is that I'm using cdkVirtualFor add I want animate new item after it is added to list. Unfortunately the list is animated only initially and after first element is added, after that new items just appear without animation. Stackblitz…
PoorDeveloper
  • 186
  • 1
  • 19
4
votes
3 answers

How to create shake animation in Angular 6?

How can we create a shake animation using Angular 6 animations? The animation should look like 'shake' animation in Animate.css
shafeequemat
  • 1,002
  • 2
  • 17
  • 22
4
votes
3 answers

Migration from angular 5 to angular 6 - changes in @angular/core

I've upgraded my project from angular 5.2.9 to angular 6.0.0-rc.5. Except few quick RxJS fixes in the packages path, all looks good. (This link was quiet helpful : Want to upgrade project from Angular 5 to Angular 6) But, for some reason i'm…
Rot-man
  • 18,045
  • 12
  • 118
  • 124
4
votes
1 answer

Absolute image animate behing another div - Angular 5 animation

I have an image I want to animate, it should slide bottom up to its position. I'm using Angular 5 animations and so far my animation works, but not exacly as I want it. Please check this Plunker as it is an example of what I have. Ok, I have two…
João Ghignatti
  • 2,281
  • 1
  • 13
  • 25
4
votes
1 answer

Transform not working on angular5 animations

I'm trying to use the transform property on the Angular 5 animations, but it doesn't work and I don't know why. I've tried to put inside keyframe, it didnt work too. Just the opacity is working. This is the animation code: import { trigger, state,…
Jefferson Costa
  • 97
  • 2
  • 7
4
votes
2 answers

Angular 5 Browsing animations but conditional

I've got a numbered nav menu with 6 items and their order is important, say, for example, like a checkout then login/create account then shipment then payment setup : You can go back in the steps at any step. Forward is authorized too. Jumping…
tatsu
  • 2,316
  • 7
  • 43
  • 87
4
votes
2 answers

Pause Angular Animations

Is it possible to pause animations in Angular 2+? I would like to pause an animation upon mousing over an element and resume the animation from where it left off when mousing out. I have created a simple script to demonstrate:…
Irving
  • 1,257
  • 2
  • 16
  • 28
4
votes
1 answer

Angular animate query incorrectly returning zero elements

I'm working on an Electron app using Angular, and the main page is supposed to display a list of items which are loaded asynchronously from a JSON file. They load and animate fine, but in order to stagger their animation, I call angular animate's…
Matthew Oldham
  • 61
  • 1
  • 6
4
votes
0 answers

Angular animation not working for iOS 7

I'm having an issue in my Angular 5 app: I have the trigger for an angular-animation placed in a ul tag, which is meant to change its height from 0 to *, and it does work well in all devices eccept for devices running iOS 7. When testing those, and…
Cyberpunker
  • 113
  • 1
  • 2
  • 9
4
votes
1 answer

How to stop animation before it is finished?

If I have started an animation with Angular, how can I stop it before it is finished? I could need to stop an animation for example if I have an animation when a user clicks on something. And if the user clicks again before the animation is…
EricC
  • 5,720
  • 13
  • 52
  • 71
4
votes
2 answers

Angular: Animations for pseudo-elements like :before, :after

I'm looking for the way to animate pseudo-elements like :before, :after with Angular animations. I tried to do with a query: trigger('myanimation', [ query('.myclass:after', style({ top: 10px })) ]) but unfortunately, it did not work. Here is…
Stepan Suvorov
  • 25,118
  • 26
  • 108
  • 176
4
votes
1 answer

How to go through multiple states with Angular 4 animations?

I am working with Angular 4 animations, and I wanted to know what is the best way to go from an initial state to a final state, through other ones. If we take this as an example (https://angular.io/guide/animations) : animations: [ …
br.julien
  • 3,420
  • 2
  • 23
  • 44
1 2 3
…
44 45