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

Loading spinner animation when changing route in Angular 7

I played with the Angular animations (fade in, fade out, etc..) but I want to display a custom loading spinner when changing from one route to another : List of products TO detail of a product (and the way back). The spinner would have to fit in the…
fallais
  • 577
  • 1
  • 8
  • 32
0
votes
2 answers

How to use Angular animations sequence() method to trigger animation only after one finishes?

I have two elements on the page that I want to animate sequentially. 1. h1 tag 2. the background image My component's html template looks like this: `

O.MeeKoh
  • 1,976
  • 3
  • 24
  • 53

0
votes
0 answers

TypeError: _this._driver.validateStyleProperty is not a function TypeError: _this._driver.validateStyleProperty is not a function

here i tried to add fade up animation to the element of home.component.html. But error occured. This is done on Angular 6. Thanks in advance. Error occured after i added the animation :[.... ] section in…
Furba Tenzing Sherpa
  • 5
  • 3
0
votes
0 answers

Angular 7/CSS animation: expanding a form field on focus by a specified amount?

I created a CSS keyframe animation for a form field to expand on focus via scaleX. @keyframes formField { 0% { transform: scaleX(1); } 50% { transform: scaleX(1.03); } 80% { transform: scaleX(.98); } 100% { …
Steve
  • 14,401
  • 35
  • 125
  • 230
0
votes
1 answer

[@.disabled]="true" causes console errors

I want to disable the angular animation at certain times and therefor found the [@.disabled]="isDisabled" in the docs. So I wanted to use it in like this: [@.disabled]="true" (just to test it) and I get constant errors: Error Text: ERROR…
Stefan
  • 14,826
  • 17
  • 80
  • 143
0
votes
1 answer

Angular transition animation between states only animating correctly for one state

I am trying to add expandable rows to an angular material table, so I found an example. I modified the example by upgrading the angular versions to ^7.0.0, and suddenly the animation has stopped working when transitioning from 'collapsed' to…
phelhe
  • 699
  • 3
  • 14
  • 20
0
votes
1 answer

Chaining ngIf and animation transitions

Background I am seeking to animate a badge within a component. It has two possible states: Hidden Shown When the badge transitions from hidden to shown, I want it to fade into the page and when it transitions from shown back to hidden, I want it…
Whit Waldo
  • 4,806
  • 4
  • 48
  • 70
0
votes
1 answer

Add different animation depending on the previous route page

I need a component(brand name) to animate based on the previous route in angular. That is when the previous route is home then the component should be loaded from right, and if the previous route is brand model then the component should be loaded…
CR7
  • 680
  • 2
  • 8
  • 24
0
votes
1 answer

How to perform auto scroll list in Angular6?

Hi I was trying to implement auto scroll on page init , But i did not get the solution is there any in build method in Angular ? I have tried import { Component } from '@angular/core'; import { trigger, state, style, animate, transition, …
Gopinath Kaliappan
  • 6,929
  • 8
  • 37
  • 60
0
votes
0 answers

Angular Animation pause domUpdate while animating

I have a simple observable representing the length of a list. As it evolve, I want to animate increments and decrements of that number, for example: the number increases I fade out the previous value I fade in the new value But during the fade…
Alexandre SIRKO
  • 816
  • 11
  • 22
0
votes
1 answer

Animations: opacity property not being applied

I have made a very simple animation : on click on a div, it should collapse/expand and display different content. I have mocked the behavior here : https://stackblitz.com/edit/animations-opacity-issue?file=src/app/app.component.ts When you click on…
user4676340
0
votes
2 answers

angular :how to rotate an image with animation from component?

I have created a component called compass component in my map application , when I rotate the map , I want to programmatically rotate that compass with animation also , Im using angular animation , import { Component, OnInit, OnDestroy, Output,…
AhammadaliPK
  • 3,448
  • 4
  • 21
  • 39
0
votes
1 answer

Animate the angular page

I have a home and register component. In home component, there is pagination floating from top to bottom on the rightmost side and a register button at the right. Its background color is yellow. While clicking the register button then the home…
CR7
  • 680
  • 2
  • 8
  • 24
0
votes
1 answer

How to manipulate Angular Animations parameters?

Okay we have an animation which looks like this: export const scaleDownLeft = animation( [ query(':enter, :leave', style(sharedStyles) , { optional: true }), group([ query(':enter', [ animate('{{timing}}s…
Vugar Abdullayev
  • 1,852
  • 3
  • 21
  • 46
0
votes
2 answers

Angular Animations with *ngFor apply only to clicked values not to all elements

I want to apply animation when click one particular div generated with *ngFor. Currently it applies to every div when clicks. How can I achieve this ? animations: [ trigger('changeDivSize', [ state('initial', style({ width: '30px', …
Thilina Akalanka
  • 163
  • 1
  • 14
1 2 3
…
44 45