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
0 answers

Angular 8 animation with 'offset' doesn't work on IE and EDGE

I have problem with Angular animation on Internet Explorer and Edge. On another browsers everything is ok (almost). 'offset' is not supported by that browsers. I don't know why polyfill dont change code for IE. Or maybe this is bug? When I delete…
mrKorny
  • 91
  • 8
0
votes
1 answer

How to use angular animation in child component

I have an animation defined in app component @Component({ selector: 'app-root', styleUrls: ['./app.component.css'], templateUrl: './app.component.html', encapsulation: ViewEncapsulation.None, animations: [ trigger('fade', [ …
Olawale david
  • 1,457
  • 1
  • 9
  • 13
0
votes
0 answers

How to trigger animation on the host component in angular?

Let's say I have a component that I would like to animate like that (the transition of the entire page and insertion of this another search view). How can I do that? I have animations but I don't know how to trigger them on the component itself
Two Horses
  • 1,401
  • 3
  • 14
  • 35
0
votes
2 answers

Angular 9 DragDrop - How to stop the DropList "Element-Shuffle" Animation

I am trying to disable the "auto sorting/shifting" animation of the Drop List. What I mean is, given a vertical list of draggables, when I drag the top element downward, the other elements visibly shift upward. This is cool for re-sorting, but I am…
emery.noel
  • 1,073
  • 1
  • 9
  • 24
0
votes
1 answer

angular - the animation effect fails when loading the component

I want to make a opacity effect when the page-component is loaded, but I found that it must be set a setTimeout() in order to operate successfully. Is there a better way? For example: component: @Component({ selector : 'my-app', template: ` …
Finn
  • 1,323
  • 5
  • 24
  • 46
0
votes
1 answer

Animation callbacks runs immediately even without the state being changed

I'm creating an animation in angular, I need to know when it starts so I defined a callback. The thing is the callback is triggered when the component loads, even without changing the state. Template
Bonomi
  • 2,541
  • 5
  • 39
  • 51
0
votes
1 answer

Angular animations not working on Firefox due to CSP (with web-animations-js in polyfills.ts)

I have issue applying Angular animations on Firefox (and Safari). Yes I know that there are a lot of answers out there saying you can simply adding web-animations-js in polyfills.ts and it should do the trick. Unfortunately, it's not working in my…
Loc Truong
  • 359
  • 5
  • 22
0
votes
1 answer

Angular 9 - animations and *ngIf condition

I'm trying to understand animations in angular but I'm having a really hard time with it at the moment. Any learning sources would be appreciated besides this concrete example. Here is the stackblitz. My goal is to animate a component every time it…
ucimo
  • 105
  • 11
0
votes
1 answer

How do I add animation in between question routes in Angular?

I'm working on a quiz app in Angular 9, and I'm trying to add animation in between question routes, for example: question/1, question/2, etc. Right now the animation works at the beginning of the first question and in between transition between last…
integral100x
  • 332
  • 6
  • 20
  • 47
0
votes
1 answer

Angular 9 animate a stepper component

I am trying to create a component that can (potentially) have as many children as needed. So I created a stepper component which consists of two components, the parent (Stepper) and child (Step). They are pretty simple in design, the stepper html…
r3plica
  • 13,017
  • 23
  • 128
  • 290
0
votes
0 answers

Angular animation gets hidden behind the other elements

Note: New to Angular Animations I have the following angular animation which animates (move) the div from source to target coordinates. Issue 1: Somehow the animation is working but gets hidden when it goes out of the div space. What can be the…
Saurabh Kumar
  • 16,353
  • 49
  • 133
  • 212
0
votes
1 answer

Property 'visibility' does not exist on type 'UsersComponent'

This is my app.animation.ts file: import { trigger, state, style, animate, transition } from '@angular/animations'; export function visibility() { return trigger('visibility', [ state('shown', style({ transform:…
Hasani
  • 3,543
  • 14
  • 65
  • 125
0
votes
1 answer

How to do stop/pause/resume SVG animations with Angular 9?

The spec of SVGSVGElement contains methods like pauseAnimations() or unpauseAnimations(). But how can I get access these methods in Angular 9? Or how can I pause/resume a SVG path animations?
Lars
  • 920
  • 1
  • 14
  • 34
0
votes
2 answers

I have been trying to animate an *ngIf but i noticed it only animates on the first page load or refresh

I basically route from a parent component(album component) which goes to the musicList Component. The musicList component gets the music data stored in the activated router which simply resolves it from a resolver service (although I have tried…
Charles
  • 3
  • 1
0
votes
2 answers

angular animation :enter overflow text on button slidein

Text will start animating over button i want it should not be on top of button. I have added overflow:hidden but it is not working as it should. demo: https://stackblitz.com/edit/angular-wetmep?file=src%2Fapp%2Fapp.component.html animations: [ …
Indraraj26
  • 1,726
  • 1
  • 14
  • 29
1 2 3
…
44 45