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

Angular 9 Universal SSR fails on Lazy Loaded route with HTTP call

I have an Angular 9 (v9.0.6) app working correctly with Universal (SSR) in it and I was performing the last set of tests prior moving to PROD when I noticed the application hanging with 100% CPU consumption. I analyzed the error and turned out to be…
Carlos Torrecillas
  • 4,965
  • 7
  • 38
  • 69
2
votes
0 answers

How do I animate a component before switching the to the next component?

I have been attempting to animate the transition between two components in my app component. Ideally this is what I would like to happen: currently showing the first component slides off of the page switches to second component now showing…
NotAFrontEndDev
  • 23
  • 3
2
votes
1 answer

After Importing the "Browser animation module in **Module.ts** file ( by running **npm install** @angular/animations)

After Importing the "BrowserAnimationModule in Module.ts file ( by running npm install @angular/animations) import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ ..., imports: [ ..., …
DINESH
  • 21
  • 1
  • 4
2
votes
1 answer

No smooth transition of :enter and :leave Angular animations

I'd like a smooth slide in and slide out animation using Angular animations. I am using ngSwitch to show/hide these components. The incoming component pushes the previous one up before it disappears out of view. I've tried adding a delay but this…
FakeEmpire
  • 668
  • 1
  • 14
  • 35
2
votes
1 answer

@angular/router wrap route component in router-outlet for styling

I have a simple angular (8+) application using @angular/router with multiple components as routes, and each component use @angular/animations for transitions. directive is fullscreen using css width: 100vw and height: 100vh to…
sebastienbarbier
  • 6,542
  • 3
  • 29
  • 55
2
votes
1 answer

How to handle animations and transations when using NGXS in Angular 8?

I am using NGXS store for the first time to manage the state of an app. All is going fairly well but I came across a problem that I have not been able to overcome and it concerns transitions/animations. I have a list of items and those items can be…
António Quadrado
  • 1,307
  • 2
  • 17
  • 34
2
votes
1 answer

Hide scrollbar during transition in Angular Animation

I need help on hiding scrollbar during transition . trigger("routeFadeState", [ transition(":enter", [ style({ transform: "translateY(-100vh)" }), animate("1000ms ease-out") ]), transition(":leave", animate( …
Hariharan Seenu
  • 45
  • 1
  • 11
2
votes
1 answer

How can we slow down the opening of mat-expansion panel using angular-animations and give them a fade in out effect

How can I animate mat-expansion panel on open and close. trigger('fadeInOut', [ state('open', style({ opacity:1 })), state('closed', style({ opacity:0 })), transition('open=>closed', animate('1.5s…
krypton
  • 61
  • 2
  • 7
2
votes
1 answer

How to fix mat-checkbox animation hang/freeze when content is rendering in Angular2+?

I use mat-checkbox (angular material UI 7.2) in my Angular 7 application. There are some site content generations when I click mat-checkbox. There are only 10 ngFor items (complex) in my real application. Check…
Marius Kazlauskas
  • 221
  • 4
  • 24
2
votes
2 answers

Animating material icons to transform: Hamburger to X

Long time reader, first-time poster. I want to have a material hamburger transform to an "X" when clicked and then transform back when clicked again in an Angular application. The website…
eroc83
  • 21
  • 1
  • 2
2
votes
1 answer

Property 'currentState' does not exist on type 'FadeblockComponent'

I am working on animations in Angular, and am running into an issue where the block will not fade out. HTML in fadeblock:
Component file: import { Component, OnInit } from…
Jim
  • 1,315
  • 4
  • 17
  • 45
2
votes
3 answers

Angular 7 animation trigger causes console error

I am trying to set up a fadeInOut animation on a component. My app module imports BrowserAnimationsModule. I created an animation and a trigger in a separate file: import { animate, style, animation, trigger, useAnimation, transition } from…
Steve
  • 14,401
  • 35
  • 125
  • 230
2
votes
0 answers

Angular animation of parent div causes content of material tab not to be visible after animation is finished

I have an angular animation on a div. Inside of the div I have a material tab component. When I click on one of the tabs as the div is animating into the page, the content of the tab disappears once the animation of the div is finished. Here is a…
user3037309
  • 21
  • 2
2
votes
0 answers

Conditional angular animations based on feature detection

I have an angular animation that will expand/collapse elements vertically. This looks & works great in Chrome & Firefox. However, for other browsers that don't support WebAnimations will use the CSSAnimation that Angular generates, and the…
Chris Barr
  • 29,851
  • 23
  • 95
  • 135
2
votes
0 answers

Angular 7 animation for router works only once

I added an animation effects for navigation between pages, but it works only once. On start-up, and then it doesnt work any more. Here is an animation logic: import { trigger, transition, style, query, group, animateChild, …
Mike Kylmä Lampi
  • 465
  • 1
  • 5
  • 15
1 2 3
…
44 45