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

Animations in angular 5 on ngStyle

In following code I want to apply animations on div [ngStyle]="{'width': object.widthValue}" When width increase that will animated {{object.yLable}} …
Gitaram Kanawade
  • 341
  • 1
  • 4
  • 19
0
votes
1 answer

Toggle between two forms using Angular Animate module

I want to display two forms. 1: Login Form 2. Register Form First time show Login Form, on click of "create an account", I want to show Register Form and hind the Login Form and vice versa. I did this using Jquery. $('form').animate({ height:…
Mogan Rangan
  • 21
  • 5
0
votes
2 answers

Transition Animation not working in Angular 5

I am working on an Angular 5 app which needs a slide-in/slide-out sidenav. Trying to use animation states to get this effect. The state css is getting applied correctly and the div moves in and out, however it is jumpy i.e. the 1500ms ease-out…
iamaatoh
  • 758
  • 5
  • 12
0
votes
1 answer

Partial accordion-style animation on Angular component with various templates

I'm making a production app that has a card-style layout. Every filter (date pickers, etc) and visualizers (table, chart) is wrapped inside a "Card" component. There are even two child components that inherit from this class. So in the end, this is…
Zerok
  • 1,323
  • 1
  • 24
  • 56
0
votes
0 answers

ERROR TypeError: Cannot read property 'length' of undefined angular animation

I'm trying to put angular animation at one of my users list. the list is created by FOR Loop(*ngFor). Before the loop i use my trigger [@listAnimation]="usersList.length". the animation is working fine, But it gives an ERROR : ERROR TypeError:…
Sushil
  • 2,324
  • 1
  • 27
  • 26
0
votes
0 answers

Angular 4 animations for selected ng for element

I am trying to make a accordion with angular4 animation.Problem is when i click on one ul element everyelement is getting trigged and all is being shown/hidden.I am not able to track the particular clicked element.How can i track the cliked elemt…
Trinanjan Saha
  • 17
  • 1
  • 7
0
votes
1 answer

Angular animations not working

I'm trying to run entering animation for appearing elements on my page which are looped via *ngFor. I've tried to use callback to figure out if these animations ever been launched and they were! But nothing was shown. Currently my code looks…
Sergey
  • 7,184
  • 13
  • 42
  • 85
0
votes
1 answer

Angular 5 animations issue

I'm new in angular animations and currently following the Angular guide "Entering and leaving" part. Currently I have something like that
Sergey
  • 7,184
  • 13
  • 42
  • 85
0
votes
2 answers

Angular: custom state animation not working as expected

I have two divs (parent and child) and I want to do a special animation based on custom state (close => open && open => close): when the state goes from close => open: I want the parent div's opacity to go from 0 to 1 and the child's scale to go…
SlimenTN
  • 3,383
  • 7
  • 31
  • 78
0
votes
1 answer

Angular animations: Transition phase doesn't wait

The following sandbox shows my issue: https://stackblitz.com/edit/ngx-anims-transition-issue see ./app/components/transition-phases/transition-phasescomponent.ts The 3rd tab expects the following to happen upon clicking on "toggle…
Jem
  • 6,226
  • 14
  • 56
  • 74
0
votes
1 answer

Angular Animation Side Effect

Animation's query() "is used to find one or more inner elements within the current element that is being animated" according to the docs. Is there a way to animate a sibling or outer element? I would like to hide another element before an animation…
sqwk
  • 2,649
  • 1
  • 28
  • 42
0
votes
0 answers

Set display to none/block after animation has finished running in Angular 5 app

I'm working on Angular 5 app that has some animations when changing tabs. It simply does ease-in-out animation. What I want to achieve now, is to set the display to either none or block once the animation has stopped running. I'm not really sure…
Grentley
  • 315
  • 3
  • 6
  • 19
0
votes
1 answer

Angular 4 Animation onload?

So when a user visits an album page, I'd like for the album photo to slide to the right as the page is loading. How would I go about that ? Here is the animation: animations: [ trigger('slide-in',[ state('out', style({ transform:…
Eddie Taliaferro II
  • 185
  • 5
  • 16
0
votes
1 answer

How to trigger an animation just after the element has been rendered in Angular 2+

It's incredible how Angular make simple tasks be not intuitive to implement, it reminds me of ASP.NET Web Forms. Terrible déjà vu. How can I execute this animation just after the element appears on the page? import { trigger, transition, style,…
Diego Alves
  • 2,462
  • 3
  • 32
  • 65
0
votes
1 answer

Registering click event and animations in Angular 4

When I click on an element of the accordion list, all elements expand. I want to open just the card whose header has been clicked. plnkr link here app.component.html
ali karimi
  • 542
  • 4
  • 13
1 2 3
…
44 45