Stack Exchange
Stack Overflow
  • Questions
  • Tags
  • Users
  • About
Stack Overflow
    1. Public
    2. Questions
    3. Tags
    4. Users
    5. About

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 :

  • Angular Animations Documentation
664 questions
2
votes
1 answer

How to use angular animations to always move it in one direction?

I am trying to use angular animations to move the element to left for 20px when the button is clicked. It's easy to do, but I can't accomplish to move the element when the button clicked again, where the element had to move another 20px to left. And…
javascript angular angular-animations
asked Aug 23 '18 at 19:26
Hikmat G.
  • 2,591
  • 1
  • 20
  • 40
2
votes
1 answer

ElementRef not contained within source code

Within my template, I use *ngFor
…
angular angular6 angular-animations
asked Aug 16 '18 at 00:05
Dan
  • 475
  • 2
  • 5
  • 11
2
votes
1 answer

Angular animate before routing

In my current project I'm trying to get rid of Angular animations skipping when routing. In my template I have got different "widgets" with mat-card in a css-grid layout which I want to make appear and disappear smoothly. My animations in the child…
angular animation angular-routing angular-animations
asked Aug 09 '18 at 09:55
Felix Lemke
  • 6,189
  • 3
  • 40
  • 67
2
votes
1 answer

Angular: transition between states isn't animated correctly if animate() is placed inside the group()

I have a parent component with a nested child component, both have :enter and :leave animations. To run both animations in parallel I use group() and animateChild() functions. But, if the parent animate() call is located inside group() call, the…
angular angular-animations
asked Aug 07 '18 at 11:47
Valeriy Katkov
  • 33,616
  • 20
  • 100
  • 123
2
votes
2 answers

Angular 6 router-outlet styling applied to element below it

I'm in a phase of adding router transitions to the angular application and I'm facing weird problem. Styling for router-outlet gets applied to the element below it in the DOM hierarchy. Here's my code:
…
html angular sass angular-animations
asked Aug 01 '18 at 10:21
mat.hudak
  • 2,803
  • 2
  • 24
  • 39
2
votes
1 answer

Angular 2: How do I use angular animations to fade in/fade out of components within after the initial load?

As of right now, the code is working as it should (but now how I want haha). The animation works and fades in when the page initially loads & is first initialized but the animations do not occur when I am accessing routes within the after the…
javascript angular angular-animations
asked Jul 27 '18 at 18:24
Bill Sheng
  • 101
  • 2
  • 3
  • 10
2
votes
1 answer

Angular Animation not transitioning in IE11 and Firefox (works in Chrome)

My Angular animation attached to a div works in Chrome (increasing the a height of 0 to height: '*'). I have imported all the necessary polyfills and installed web-animations-js The height increases, however there is no animation transition…
angular typescript cross-browser angular-animations
asked Jul 19 '18 at 16:26
FakeEmpire
  • 668
  • 1
  • 14
  • 35
2
votes
2 answers

Angular material expansion panel error - TypeError: this.driver.containsElement is not a function

Angular material's expansion panel depends on BrowserAnimationsModule. I have included animation module but when I create a simple expansion panel it crashes with error: ERROR TypeError: this.driver.containsElement is not a function at…
angular angular-material angular-ui angular6 angular-animations
asked Jun 27 '18 at 04:00
RohitAneja
  • 966
  • 12
  • 15
2
votes
0 answers

How can I get this angular animation to repeat?

I'm new to Angular and I made an animation that starts on enter. Once it's done I want it to jump back to the original position and slide down again, I'd like it to loop infinitely. Here's what my animation looks like right now: animations: [ …
angular angular5 angular6 angular-animations
asked Jun 12 '18 at 17:41
Jeff
  • 129
  • 1
  • 2
  • 13
2
votes
0 answers

Animations not changing state using Angular 6.0.1 in Safari 11.1.1, specifically trying to change bottom property

fab-menu.component.ts below with animation code import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { trigger, state, style, animate, transition, } from '@angular/animations'; @Component({ …
safari angular-animations
asked Jun 05 '18 at 03:11
tengence
  • 61
  • 9
2
votes
1 answer

Animation transition not working - angular 6

I need to animate when opening and closing a Sidenav animations: [ trigger('slider', [ state('open', style( {} )), state('closed', style( {} )), transition('closed => open', animate('0.4s…
angular angular6 angular-animations angular-transitions
asked May 29 '18 at 15:05
André Montório
  • 311
  • 1
  • 4
  • 14
2
votes
1 answer

Fade in out animation Angular +2

I'm trying to fade the new element in, and fade it out when I deleted it. animations: [ trigger('enterAnimation', [ transition(':enter', [ style({opacity: 0}), animate(800, style({opacity: 1})) …
angular angular-animations
asked May 29 '18 at 07:40
Marvin Ericson
  • 239
  • 2
  • 7
  • 20
2
votes
3 answers

Change background color with Angular animations

I want to change my gradient background color to another one when clicked a button. Here's an example from Angular Docs as i show below. This code works fine with normal colors(changes slowly during 1000ms -as what i want-) but not for gradient…
angular css-transitions linear-gradients angular-animations
asked May 29 '18 at 06:09
chnselim
  • 244
  • 1
  • 3
  • 16
2
votes
1 answer

HTML select tag animation for its options

How to animate