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

Is it possible to provide animation progress to angular animations?

I have a quite simple animation which was implemented using the Angular animations framework. Instead of simply triggering the animation and waiting 0.15 seconds until completion i want to provide some custom animation progress value. animations: [ …
daniel723
  • 59
  • 2
0
votes
1 answer

How to get Angular Router Animations working with 'ng build --prod'?

I get errors when I want to build my angular app with 'ng build --prod': ERROR in src/app/route-animations.ts(15,9): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(20,15): Error during…
JuNe
  • 1,911
  • 9
  • 28
0
votes
1 answer

Animating angular element via the host element not working

When I move my animation from inside my element onto my host element it refuses to work, from what I have researched this is the correct syntax? Here is my host element
22Ryann
  • 137
  • 1
  • 11
0
votes
1 answer

Angular animate the whole page content on click of a button

I want to animate from bottom when I click on link. Below is the image what I want to achieve. On click of Link whole "Red" section should be animated and come from the bottom side. To achieve that What I did is: What I tried is: @Component({ …
Pathik Vejani
  • 4,263
  • 8
  • 57
  • 98
0
votes
0 answers

Angular Animation from void to state won't work

I have the following animation: trigger('EnterLeave', [ transition('start => void', [ animate('300ms ease-out', style({ transform: 'translateX(-100%)' })) ]), transition('void => stop', [ state('void', style({ transform:…
Tom
  • 3,672
  • 6
  • 20
  • 52
0
votes
2 answers

How to dynamic update angular animation ? (angualr 8)

I'm using the angular animation like this: @Component({ selector: 'app-navbar', animations: [ trigger('openClose', [ // ... state( 'open', style({ height: this.navBarHeight ? this.navBarHeight.toString()…
Shinji035
  • 331
  • 2
  • 6
  • 17
0
votes
2 answers

Fade list items in and out when items change in angular 6

I have a list of products which is controlled by a list of categories so when a category is clicked it displays all the products within it I want to animate this list so that when the category is clicked each list item fades up from +50% to 0…
andy
  • 129
  • 3
  • 12
0
votes
1 answer

How to define transition correctly in angular 5 animation?

I was able to run animation in the application but I'm trying with no success to animate slide out, I've tried the following: animations: [ trigger('slideOut', [ transition ('* => void', [ animate('1000ms ease-out', …
user2304483
  • 1,462
  • 6
  • 28
  • 50
0
votes
0 answers

Why animation doesn't work in an Angular 5 app?

I'm trying to develop the first animation in an Angular 5 app and it doesn't work. What I've done till now in detail: app.module.ts import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ …
user2304483
  • 1,462
  • 6
  • 28
  • 50
0
votes
1 answer

How can I create custom bubble animation for angular material slider thumb?

I'm implementing angular material slider for content versioning. There is a requirement to add bubble that would follow mat-slider-thumb along the slider track. The biggest problem is to trigger animation on every mat-slider-thumb position…
Marcin Wojtach
  • 135
  • 1
  • 8
0
votes
0 answers

How to trigger angular animations on first load?

I've been following the official documentation for triggering angular animations when the router changes views, but I was curious to know how you can trigger angular animations on first page load. It's not discussed in the official docs, and google…
Anastasius Vivaldus
  • 325
  • 2
  • 12
0
votes
1 answer

How to add animation when data is changes in angular?I want to add animation on left and right button

when I click on right and left button then data should come with animation but it didn't work for me I added some void animation in angular and put a trigger on my HTML element animation did work when the page is refresh but it didn't work when I…
Harsh kumar
  • 55
  • 10
0
votes
1 answer

2 different animations doesn't work together on 1 component

this is my component template