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

How to avoid :enter/:leave animations on value change when using *ngFor?

I'm using angular 9 together with angular material. I've got dynamic list of strings that I wanna be able to edit - each in a separate input. I also wanna be able to add and delete them, and have some animations for that. Issue: :enter and :leave…
Sergey Smirnov
  • 3
  • 1
0
votes
3 answers

How to remove an animation from a component when it is being used inside another Angular Component?

I have created an Angular Component which adds styling and some animation to a photo. I want to use the same photo styling in another component, but I don't want the animation to transfer over to the new component. Animation on…
MysticalMamba
  • 15
  • 4
0
votes
3 answers

Auto hide sidebar when clicked outside of it

I was using the below link to create a sidebar using angular animation and it works perfectly well. https://stackblitz.com/edit/angular-sidebar-animation?file=src%2Findex.html But I want to add functionality to close the sidebar when user click…
Deepak
  • 113
  • 2
  • 10
0
votes
1 answer

Angular Animation on element

I have a table showing a list of items. This list of items is being updated by using polling by doing an http get request against the server, and rendering the response only if there has been a change in the response. What I want is to attach an…
Ernesto G
  • 525
  • 6
  • 20
0
votes
1 answer

Unable to trigger Angular transition to expand/hide div

I'm using Angular BrowserAnimations, but can't seem to actually trigger it. My component animations are set to animations: [ trigger('expandHide', [ state('expanded', style({ height: 'auto' })), state('hidden', style({ …
Joshua Ohana
  • 5,613
  • 12
  • 56
  • 112
0
votes
1 answer

Angular Animations slide in won't work, just appears

I'm trying to implement a route transition, a slide in, using Angular Animations. The transitions kind of works - it won't slide in, but slide out. The slide in feels like a lag, it just appears. How so? export const slider = …
Tom
  • 3,672
  • 6
  • 20
  • 52
0
votes
0 answers

angular animation on a directive

TS Directive file import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core'; @Directive({ selector: '[appDropdown]' }) export class DropdownDirective { @HostBinding('class.open') isOpen = false;…
beginnersLuck.css
  • 35
  • 9
0
votes
0 answers

Can't bind to 'fadeInAnimation' since it isn't a known property of 'app-home'

I am trying to include animations in my navbar using Angular but its showing the error as below: Imported animation package in appmodule.ts file import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from…
Nisha
  • 1
0
votes
1 answer

CSS drop animation with stationary shadow

I'm looking to make a "stamping" animation, and have got to the following point: div { height: 75px; width: 75px; background-color: brown; border: 4px dashed black; border-radius: 50%; position: absolute; left: 200px; top:…
O. Aroesti
  • 1,016
  • 11
  • 32
0
votes
1 answer

angular - how to add global animation triggers only once

I have the same animation triggers in most of my components. Is there a way to import a set of triggers only once for the entire app globally or for specific feature-modules? export const FADE_ANIMATION = [ trigger('fade', [ …
Han Che
  • 8,239
  • 19
  • 70
  • 116
0
votes
1 answer

Module nested components animation

I would like to add animation to my lazy loaded module routes. My routes looks like this. { const appRoutes: Routes = [ { path: '', component: StartComponent, pathMatch: 'full' }, { path: '/', component: DefaultComponent, …
Jamal James
  • 11
  • 3
0
votes
2 answers

how to dynamically set the number of states in angular

changeDetection: ChangeDetectionStrategy.OnPush, animations: [ trigger('slide', [ state('1', style({ transform: 'translateX(0)' })), state('2', style({ transform: 'translateX(-50%)' })), transition('* => *', animate(300)) …
YulePale
  • 6,688
  • 16
  • 46
  • 95
0
votes
0 answers

Angular-animation the appearance of the contest from left to right with the following effect on the view

I started to learn angular animation. but I have a very interesting effect of the appearance of the image.You can see it on video https://youtu.be/iqa4R8PE6zo. I can’t understand what styles between states need to be specified. Can you help me with…
Denis
  • 21
  • 2
0
votes
0 answers

angular 6 news ticker ui using an array, css animation

This is what I have. stackbitz. Change the position of the array element. I want to move items to top with an animation like in this example. problem is I have so many implementations in this component. So it's better if I can do this with only…
Pumayk26
  • 537
  • 10
  • 28
0
votes
0 answers

Angular Animation - Trying to add pause() on mouseover and play() on mouseout to animated observable array

Cannot get an individual headline from the list of headlines returned by *ngFor to be animated with Angular Animation Player. I'm making a headline news scroller that takes 20 news headlines from a live rss feed using rxjs and observable operators.…
cinerama
  • 47
  • 9
1 2 3
…
44 45