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
3
votes
4 answers

Failed to execute angular animate : Partial keyframes are not supported

I'm getting started with Angular animations and i'm stuck on that error: ERROR DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. I tried to google it without any success. Here is my…
user1173169
3
votes
1 answer

No animation during resizing Angular Material2 sidenav

Have a mat-sidenav (opened="true") with mat-nav-list Each mat-list-item has a mat-icon and a span mat-sidenav-container has autosize directive But there is no animation during resizing (collapse/expand) of mat-sidenav. HTML
Ramanujan R
  • 1,601
  • 2
  • 23
  • 43
3
votes
1 answer

Angular 5 Animations are not working on iOS 10.3 Safari

I'm using @angular/animations on my page. It works perfectly on Chrome, Firefox, Safari(Desktop) but the divs that has animation are not visible in Safari (iOS). I imported web-animations-js in my polyfills.ts file. **versions** npm 5.5.1…
Emre Alparslan
  • 1,022
  • 1
  • 18
  • 30
3
votes
3 answers

Animate an image swap in Angular 4 (Was ng-animate-swap in AngularJS)

I'd like to animate an image swap in an angular 4 app. As the controller replaces the img src property the old image should fade away and the new appear. In AngularJS this was possible by changing the opacity with ng-animate-swap. However, Angular…
duffy
  • 615
  • 1
  • 9
  • 25
3
votes
1 answer

Animating List in Angular 5

Created an animation in Angular 5 when adding and removing an item from the list. When adding an item, it appears from top, ease in slowly and get placed in the list, and when an item is removed, the item is eased out slowly to the top and…
Ranjith Varatharajan
  • 1,596
  • 1
  • 33
  • 76
3
votes
1 answer

Angular 2 animations style function in state vs transition vs animate

I'm very confused. What is the difference between the style() function inside a state() state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), and a style() function inside transition() transition('inactive => *', [ …
undefined
  • 6,366
  • 12
  • 46
  • 90
3
votes
2 answers

angular animation after an http request completly load

I have problem with animation on data that comes from an api, for example if i want to achieve an angular 4 stagger animation i need to provide objects.lenght
{{…
Ala Shariaty
  • 108
  • 9
3
votes
0 answers

Angular 4 ComponentFactoryResolver with animation?

I try to create kind of a Viewcontroller service which creates (and destroys) dynamically components (similar like the ViewController ind Ionic). It would be nice to add some sliding or fading animations to the new components, but I could not yet…
Chris
  • 4,238
  • 4
  • 28
  • 49
3
votes
2 answers

Angular - stagger animation for list elements

I have a transition defined like this: transition('show-content => hide-content', [ query('.project-view-item', [ style({ opacity: 1, transform: 'translateX(0px)' }), stagger('0.3s', [ …
Tarida George
  • 1,303
  • 3
  • 17
  • 36
3
votes
1 answer

angular 4 simultaneous animations

I'm trying to port my webapp from AngularJS to Angular 4, and I'm having some issues with animations. For a "Google Images" type of view, I have two animations that need to happen simultaneously when an item is clicked; one div needs its…
Christoph
  • 150
  • 1
  • 5
3
votes
1 answer

How to Animate List Reordering in Angular 2

I have a list of items that's bound to an array via an Observable. My application has an action effect where one of those items in the list gets a property change thus causing it to be reordered to the end of the array (currently implemented in…
blaster
  • 8,876
  • 11
  • 48
  • 77
3
votes
1 answer

Disable animations in Angular Material 2 but keep using animations in the rest of the application

I want to disable all the animations to the Angular Material 2, but when I import the NoopAnimationsModule it also prevents me for using the Angular Animation module in the rest of my app code. I'd like to be able to animate certain things of my…
Leosvel
  • 71
  • 8
3
votes
2 answers

Why can I import animation components from both @angular/animations and @angular/core?

I recently updated to angular 4 and checking the animations docs I see I should import trigger, animate and transition from @angular/animations. import { Component, Input } from '@angular/core'; import { trigger, state, style, animate, …
Lucas
  • 9,871
  • 5
  • 42
  • 52
3
votes
1 answer

Nested route disappear immediately instead of playing :leave animation

I have outer routes: /posts and /about. /posts route has nested routes: / and /pages/:pageNumber. When navigating between nested routes (/ and /pages/:pageNumber) animations work well. But when navigating to /about nested route immediately…
GProst
  • 9,229
  • 3
  • 25
  • 47
3
votes
2 answers

UNMET PEER DEPENDENCY error installing @angular/animations

I am trying to install @angular/animations. Apparently, this is a dependency of @angular/material as I am getting GET http://localhost:3000/@angular/animations 404 (Not Found) since installing material. I am getting this error installing it: > npm…
Brad Mathews
  • 1,567
  • 2
  • 23
  • 45
1 2 3
…
44 45