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

Angular2 dynamic component

I work with Angular 2 + TypeScript. Right now in progress to add angular2-busy. For this library I need to include angular2-dynamic-component, but I don't know what I must do with it. This is error This is App Module import {BusyModule} from…
3
votes
0 answers

Angular 2 animation trigger for ngFor (state "in")

I'm trying to create animation on toast message in/out with ngFor. When new toasts come, the animation is ok, but if I click to close one of them, all toast messages are removed from the DOM, but are still in the model and when new Toasts come,…
f14ka
  • 88
  • 6
2
votes
1 answer

Angular router outlet incorrect height after adding router animation

I am trying to add router animations for my angular project, I have added an animation but for the animation needs to work I am adding absolute position for the selector inside the router-outlet tag. Which is creating the problem and the component…
RAHUL KUNDU
  • 561
  • 2
  • 10
  • 26
2
votes
1 answer

Angular 14 The animation trigger "rootItem" has built with the following warnings: - The following provided properties are not animatable: overflow

Updated to Angular 14 and this warning appeared. These properties are not used in my animations. [Error in console][1] The animation trigger "rootItem" has built with the following warnings: - The following provided properties are not animatable:…
2
votes
0 answers

import { BrowserAnimationsModule } causing problems in separate components

I'm having a problem with an import of BrowserAnimationsModule. In two of my components I'm running some typescript to create a cursor animation which is breaking when i import BrowserAnimationsModule. No implementation, just importing alone is…
RobertL
  • 21
  • 1
  • 5
2
votes
0 answers

Angular transition reverting to default state

I have a transition as defined below but the transition goes back to it's default state. I need my div tag to slide left on increment and slide right on decrement animations: [ trigger('animSlider', [ transition(':decrement', [ …
2
votes
0 answers

TypeError: a is not a function in AngularJS on Modal Pop-up Issue

Whenever I am opening the Modal Pop-up, I am getting the TypeError on console and after that entire screen gets stuck/Freeze. I have to refresh the page every time after I open the Modal popup. Error I am getting: TypeError: a is not a function …
2
votes
0 answers

Animating between the same component in Angular

I have a Question component. In app-routing.module.ts { path: 'chapter1/:question', component: QuestionComponent, data: {animation: 'Question', question: true}, canActivate: [AuthGuard]}, There are 3 questions in each chapter, and there are 4…
randomuser12345
  • 61
  • 1
  • 1
  • 6
2
votes
0 answers

Angular Storybook Functions & Animations

I have created a simple accordion using Angular. The panel in the accordion is animated using Angular animations. I want to replicate what I see working within the app within storybook. It however does not show the animation, it is always open and…
Bwizard
  • 955
  • 2
  • 15
  • 36
2
votes
0 answers

Angular Animation Carousel

I have converted the following carousel from React to Angular but not able to achieve an animation effect for the same. Can you give me a solution? Can not achieve look and feel with angular animation. Link for the carousel -…
Asmita Bhiware
  • 383
  • 1
  • 3
  • 9
2
votes
1 answer

Angular animations *ngIf + opacity only works in one direction

I'm having an issue with fading in and out an error message while also using *ngIf. The fade-in works fine, but the fade out does not work. Instead, the text just disappears (as if set to display:none), even though the *ngIf does not take effect…
John Churchill
  • 342
  • 4
  • 11
2
votes
2 answers

How to implement flipclock in angular

I am trying to implement a countdown timer using angular as implemented in this The problem is that the animations are not being applied on change of values, what I am I missing? html
Owen Kelvin
  • 14,054
  • 10
  • 41
  • 74
2
votes
1 answer

cannot compile and find module angular/animations

This is my Error message, anyone can help? This likely means that the library (@angular/platform-browser/animations) which declares BrowserAnimationsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a…
Ishay
  • 65
  • 1
  • 7
2
votes
1 answer

Input Animation when value changes Angular 2+

Hello im new with angular animations, i want to make my input animated when input value changes (is a calculator). I have done this, how can shoot an event to execute the animation? @Component({ selector: 'xxxxx', templateUrl:…
2
votes
1 answer

How to trigger animation manually inside the component?

In Angular 9 animations, how would I trigger a animation from the component itself? I assume I would do this manually in the component itself since it keeps track of the state of when the graph is created. As opposed to using a template expression…
dman
  • 10,406
  • 18
  • 102
  • 201