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

Angular List item animation with custom component

I am new with angular and angular animation and I want to understand something. I've created an animation on a list of item (on enter / on leave). For each item, I use a custom component. And to make the animation working, I have to wrap the…
Gildas Cuisinier
  • 1
  • 2
0
votes
1 answer

List items animation not working when add/remove element in the same time

I want to display a list of message. But if there is a lot of message, the message are overflowing out of the screen. So, I wanted to remove the first element to put it and the end of the list. But I wanted to remove it with an animation, and add it…
Gildas Cuisinier
  • 1
  • 2
0
votes
0 answers

Ng-container forcing the content to break bootstrap grid view

I'm making use angular/animations on my async data from firestore. I've followed an article and the guy used the async content inside ng-container. Without using it my content is working fine with 4 cards in a row. But ng-container forces them to be…
Saad Ashfaq
  • 188
  • 1
  • 2
  • 12
0
votes
1 answer

How do I utilize an exit animation in Angular 7 when removing an element from ngFor?

I am trying to remove an element from an Observable array and utilize an exit animation. The enter animation works perfectly, however the exit animation simply doesn't fire and the element is removed suddenly. I've included my code below. I…
pelham
  • 128
  • 1
  • 10
0
votes
2 answers

Angular - Make div grow / shrink while other div slide out / slide in

I am new with angular and angular animations and I have a problem. This is my html code:
Sagie
  • 996
  • 3
  • 12
  • 25
0
votes
1 answer

Angular animation jumps to undesired value upon completion

I've created an Angular animation (please see Stackblitz link below). I want an element to animate on entry, when the condition of the ngIf that wraps it becomes true. The animation works at the beginning, expanding from 5px to 50px in width. But…
CodyBugstein
  • 21,984
  • 61
  • 207
  • 363
0
votes
1 answer

AngularJS Animate - Transition To Different Background Color Only Works One Way

I use the following CSS to animate the change in background color for a div: #availability-button.red-add, #availability-button.red-remove, #availability-button.green-add, #availability-button.green-remove{ transition: background-color 2000ms…
Lloyd Banks
  • 35,740
  • 58
  • 156
  • 248
0
votes
1 answer

Angular animation slide up content menu

I am trying to get my head around angular animations. I found an article on how to create an animated menu, so I implemented it. This is what I have so far (I have stripped out code not relevant to this question) import { Component, AfterViewInit,…
r3plica
  • 13,017
  • 23
  • 128
  • 290
0
votes
2 answers

Angular 4+ keyframe animation, stay on last position

Im working on an Ionic3/Angular4 app and Im using angular animations to move a thingy across my screen, and everything is working, except that at the end of the animation the div resets to its original position instead of staying at the last…
Markwin
  • 177
  • 2
  • 16
0
votes
1 answer

Angular animations builder returned zero elements when the ":enter" is used in the query

I am using AnimationBuilder and AnimationPlayer to animate children elements using the query function However it stops working when I use :enter in the query private createAnimation(animation): AnimationFactory { return…
Murhaf Sousli
  • 12,622
  • 20
  • 119
  • 185
0
votes
0 answers

How to animate a page like using a "camera" on a 2d plane, specifically panning and zooming?

I've got a assignment where I need to create a 3x3 grid of rectangles, where a person can click one of those rectangles and the page zooms in on that rectangle, so it's now screen-filling. I've got that working in Angular 6 by just using their…
Jeff Huijsmans
  • 1,388
  • 1
  • 14
  • 35
0
votes
1 answer

Angular animation sequence

I'm trying to make a FAB button in Angular with a third state. When the user clicks on a button it opens a "detail view" of that button. See the stackblitz, plz https://stackblitz.com/edit/angular-dgx6fl The problem is, the 'open' and 'detail'…
Paulo GR
  • 51
  • 1
  • 9
0
votes
1 answer

Activate/Deactivate Angular 6 animations

Is there any way I can "disable" Angular animations until certain event? For example, I have a listbox with some items. Each item has an animation like this:
[ ... ]
To avoid visual overload, I'd…
Fel
  • 4,428
  • 9
  • 43
  • 94
0
votes
1 answer

detect when css keyframe is done - Angular

I have an animation that last one second and I have an @InputI'm taking, but the @Input happens so fast that the animation doesn't take place. How can I know when the animation is done in order to trigger the @Input after CSS @keyframes bulkSlideOut…
Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100
0
votes
1 answer

Angular 4.2.4 animations with params don't work

I have the following animation: animations: [ trigger('moveSomething', [ state('true', style({left: '{{leftPosition}}' , opacity: 0.5}), {params: {leftPosition: 0}}), transition('* => *', animate(300)) ]) ] And this is the…
raduanastase
  • 143
  • 1
  • 8
1 2 3
…
44 45