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

How to trigger n variable states (same state) in angular animations?

I've already read angular2-height-animation-same-state-transition but was not helpful I'm making a carousel like the ones you see on ebay or amazon sites, in the 'recently viewed items' section. The objects are placed horizontally and can be…
CaneRandagio
  • 366
  • 2
  • 15
-1
votes
1 answer

Angular animation based on conditional content in component

I know how to do an angular animation, but this time I have a component that has no specified height (it sizes based on what's inside the component). There is already content of varying height in the instances of the component. On click, it…
Steve
  • 14,401
  • 35
  • 125
  • 230
-1
votes
1 answer

How to slide in out sequentially with angular animations?

I have a scenario where I have one visible div and when user wants, this div disappears and a new one has to be displayed. All of this has to be done along with angular animations, like this carousel slides its different slides. I have created an…
christiansr85
  • 867
  • 19
  • 40
-1
votes
1 answer

Child routes not animating off when routing to another parent route

I am creating a frontend app for learning purposes and I encountered a problem I don't quite understand how to solve. Basically animation routing works properly on "same level" routes (parent -> parent), child -> (another child in the same parent…
Paweł Mikos
  • 1
  • 1
-1
votes
1 answer

Angular 'height' animation does not work when animated part is currenty not in Viewport of Browser

I have a list of items, which are animated with :enter and :leave transitions. While entering the items have a height of 0, and when done, they should have a height of *. So they have a drawer/collapse animation. And all the content under the list…
akcasoy
  • 6,497
  • 13
  • 56
  • 100
-1
votes
1 answer

How to let fly in and out element by element after each other with Angular Animations?

I want different texts to appear on the screen for a couple of seconds and disappear again. Each text should be displayed after the other and it should be done automatically. At the moment the Welcome text fades in and out as it should be but right…
SonnyBl
  • 61
  • 2
  • 6
-1
votes
1 answer

How to add parameters to Angular transition?

Trying to add params to transition same as in animation but seems transition not supporting parameters. It says: The provided transition expression "{{transition}}" is not supported. Please check reproduction in Stackblitz: Stackblitz Demo Hope…
Vugar Abdullayev
  • 1,852
  • 3
  • 21
  • 46
-1
votes
1 answer

Angular 7 lava effect animation

I have an Angular 7 app with a home page containing a large coloured block (enough to fill the page) at the top with a header and some images. I want to put some lava effect animations into the background similar to this code in case link is…
Steve Fitzsimons
  • 3,754
  • 7
  • 27
  • 66
-1
votes
1 answer

Angular Route Animations are not Working(i am using the sample animation from official docs from angular.io)

export const slideInAnimation = trigger("routeAnimations", [ transition("1 <=> 2", [ style({ position: "relative" }), query(":enter, :leave", [ style({ position: "absolute", …
Fahim Khan
  • 11
  • 1
  • 6
-1
votes
2 answers

Angular 5+ animate flex not working in Firefox

I'm pretty new to Angular animation system and I've manage to make a nice and fluid animation that works just fine on Chrome, but doesn't on Firefox and generate an anoying bug that doesn't refresh the view. When you remove the width, flex and…
Dioude
  • 33
  • 4
-1
votes
1 answer

How to define animations with parameters in Angular

I followed the instructions of this post to add parameters for my Angular animation but it didn't work. I am using Angular 2+ more specifically Angular 5. This is my animation: import { trigger, transition, style, state, animate} from…
Diego Alves
  • 2,462
  • 3
  • 32
  • 65
-1
votes
1 answer

Why isn't my animations working in angular?

main.component.ts import { Component, OnInit } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; @Component({ selector: 'app-main', templateUrl: './main.component.html', styleUrls:…
Eric Chu
  • 1,649
  • 3
  • 20
  • 26
-1
votes
1 answer

Angular 4.3 new router animation doesn't work

I have a problem with new Angular 4.3 animation. I think that I defined everything OK in accordance with: https://medium.com/@gerard.sans/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8 but I doesn't have…
kris_IV
  • 2,396
  • 21
  • 42
-1
votes
1 answer

Angular 2/4 Animating Host Component using Host Bindings, is it possible?

I'm trying to fade out a component from the component itself. I don't know if this is possible, I'm trying to achieve this using a HostBinding. Animations: animations: [ trigger('fade', [ state('fadeIn', style({ opacity: 1 })), …
Daniel Grima
  • 2,765
  • 7
  • 34
  • 58
-2
votes
2 answers

Angular 8 Dynamic Animation

Hi have a div which has 6 elements, with two buttons Left N Right, as per below image On Click of Left, I have to animate like Remove --> Right to Left Add --> Left to Right Also On Click of Right icon have to animate like Remove --> Left to…
Parshuram Kalvikatte
  • 1,616
  • 4
  • 20
  • 40
1 2 3
…
44
45