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

How to animate ScrollTop with @angular/animations?

I'm trying to replicate this animation from Material.io: To just navigate the height like the click on the first card in the example above is simple. Just animate height attribute. The problem is with the click on the second card where it then…
Marcus Lind
  • 10,374
  • 7
  • 58
  • 112
10
votes
2 answers

Run multiple query animations in parallel

I have two routed components and their container to which I've set an animation trigger, @slide, wherein I query for each and animate accordingly.
Drazen Bjelovuk
  • 5,201
  • 5
  • 37
  • 64
10
votes
3 answers

How do I perform infinite animations in Angular 2?

Basically, I want to make use of the web-animations-api polyfill in angular (4 currently) to perform infinite animations on elements. Let's see a basic non-angular example: var ball = document.getElementById('ball'); ball.animate([ {…
Mauro Aguilar
  • 1,093
  • 13
  • 22
9
votes
0 answers

(Angular 6) Route transition animations does not work on children route

I've to set a router animation to my router outlet. Actually what I want to animate is just one routing. This is my routing modules: export class CustomReuseStrategy extends RouteReuseStrategy { ... ... public shouldReuseRoute(future:…
Alberto Rondelli
  • 111
  • 4
9
votes
2 answers

How to use input parameters in angular 6 animation?

In this animation I try to decrease the width from 100% to a dynamic start width "toolWidth" (percent). The variable "toolWidth" can be set by the user in the app. Animation: trigger('testAnimation', [ state('opened', style({ 'width':…
julianpoemp
  • 1,965
  • 3
  • 14
  • 29
9
votes
4 answers

Expand input width dynamically to the length of string

I am trying to create an input field that expands at least in width dynamically with the length of the string the user entered, probably even multiline. Is that possible with an input element in Angular Material 2? With the textarea field from…
Night Train
  • 2,383
  • 3
  • 18
  • 35
9
votes
2 answers

Angular: Disable animation on initial view / page load

I have an Angular 4 component with a list of items. I followed the Angular documentation (https://angular.io/api/animations/animation) on setting up Enter and Leave animation when item is added or removed. But the same animation is played on all…
JHC
  • 91
  • 1
  • 2
9
votes
4 answers

Angular 5: fade animation during routing (CSS)

I have 2 routes : export const appRoutes: Route[] = [ { path: 'page1', component: Page1Component, data: { animation: 'page1' } }, { path:…
Wolf359
  • 2,620
  • 4
  • 42
  • 62
9
votes
1 answer

What is a angular synthetic property?

Recently, while developing a animated component, I came across the term synthetic property. ... In…
zgue
  • 3,793
  • 9
  • 34
  • 39
9
votes
1 answer

Angular 4 animate any height/position changes with angular animations

Pretty straight forward question I hope. Is there a way using angular animations syntax to animate any height or position changes on an element? For example if a DOM element is removed causing another element to shift up, can the shift up be…
rjustin
  • 1,399
  • 8
  • 19
9
votes
2 answers

Unable to process animations - returned zero elements

Animations stopped working once I created a service for my data. Looks like it's because when the page loads initially there are no elements in the ng-repeat (since it's fetching the data). Seems to be a similar case to THIS and THIS: Error: ERROR…
Kyle Krzeski
  • 6,183
  • 6
  • 41
  • 52
9
votes
2 answers

Dynamically create Angular animations

I am creating a paging component that slides to next or previous fullscreen page. Because issues with different browsers and devices I have abandoned just using CSS transitions for now. I have a working angular animate solution but the new problem…
Hampus
  • 2,769
  • 1
  • 22
  • 38
8
votes
1 answer

Angular 7 Route animations not working in nested router-outlet

I'm currently experimenting with Angular7 route transition animations and have the following problem: In my app there is a entry-component which has its own routing module and . What I'm trying to achieve is that whenever the route…
Mick
  • 113
  • 1
  • 8
8
votes
1 answer

How to Add Animations to a Component in Angular where the template is based on ngTemplate

The template for this component is like this // gives error
Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
8
votes
3 answers

Add animation when expression value changes - Angular 5

I have an expression on a page called 'pointsBalance' that displays numeric value. Its hooked up to an observable, and when pointsBalance value goes up, I want to change the colour to green then back to its original colour, and red if it goes down…
Jose the hose
  • 1,805
  • 9
  • 33
  • 56
1 2
3
…
44 45