Stack Overflow
Stack Overflow

Questions tagged [angular2-animation]

81 questions
58
votes
5 answers

How do you create reusable Animations in Angular 2

I'm playing with the Animation API, and I'd like to create a reusable animation like say sliding in content for top level router views. I managed to get through the funky meta data syntax (which is actually pretty cool once get past the crazy idea…
Rick Strahl
  • 17,302
  • 14
  • 89
  • 134
48
votes
2 answers

angular 2 animation vs css animation - when to use what?

I'm currently trying out angular2's animation and I was wondering what specific advantage they bring over standard css animations/transitions. e.g. a typical material designed card and hover effects with the box shadows. Most css frameworks use…
Han Che
  • 8,239
  • 19
  • 70
  • 116
32
votes
2 answers

Angular. Is there a way to skip enter animation on initial render?

:enter animation is applied to an element when component is rendered the first time. Is there a way to prevent it? Check this plunker for simple example of width animation: transition(':enter', [ style({width: 0}), animate(250, style({width:…
Sergey Sokolov
  • 2,709
  • 20
  • 31
26
votes
3 answers

Angular 2 Animation - boolean trigger?

I'm trying to trigger a transition bound to a boolean property, but this doesn't seem to fire. Here is a cut down version of my animation trigger trigger( 'trueFalseAnimation', [ transition('* => true', [ style({backgroundColor:…
Steven Yates
  • 2,400
  • 3
  • 30
  • 58
18
votes
4 answers

Can you move your animations to an external file in Angular2?

The @Component annotation provides us with an animations property. This can be used to define a list of triggers each with a lot of state and transition properties. When you add multiple animations to a component, this list can become pretty long.…
Per Hornshøj-Schierbeck
  • 15,097
  • 21
  • 80
  • 101
14
votes
1 answer

How to give class name to animation state in angular 2/4?

I am using angular Animations with version 4.1.3 Here is the below code: @Component({ selector : 'my-fader', animations: [ trigger('visibilityChanged', [ state('true' , style({ opacity: 1, transform: 'scale(1.0)' })), …
sudhir
  • 1,387
  • 3
  • 25
  • 43
9
votes
8 answers

Angular 2 - Animation transition not working

I need a transition between 2 colors OnClick. Right now, this is my code: Typescript animations: [ trigger('menubarState', [ state('false', style({backgroundColor:'#43a047'})), state('true', style({backgroundColor:'#333'})), …
FlorisdG
  • 754
  • 5
  • 11
  • 31
9
votes
4 answers

Angular2 Animation - Animate opacity, but not display-attribute

I want to show and hide my modal component with Angular2 animations. At the moment this is my code: animations: [ trigger('modalState', [ state('true', style({ display: 'block', opacity: '1' })), state('false', …
rakete
  • 2,953
  • 11
  • 54
  • 108
7
votes
3 answers

Angular 4 Animations boolean triggers

I'm testing a simple fade in/fade out animation on a button using Angular 4 Animations. The issue I'm having is that because I'm using boolean values nothing is being triggered. From the dev tools it looks like an .ng-animating class is added to the…
Daniel Grima
  • 2,765
  • 7
  • 34
  • 58
6
votes
1 answer

How to delay each ngFor items animation

how can i delay each item of *ngFor to animate one after another ? i mean something like this:
  • //end result like below: first item // delay 100ms and animate first…
    • Damian Martyniuk
    • 378
    • 3
    • 14
    5
    votes
    1 answer

    Trigger animation on component when parameters change

    I'm trying to trigger an animation when the parameters for a component change, but can only make the animation execute for the first time the component is routed to. All subsequent navigations to that component with different parameters do not…
    Thorsten Westheider
    • 10,572
    • 14
    • 55
    • 97
    5
    votes
    1 answer

    Continuous flashing/blinking of text line

    I'm trying to apply fade-in, fade-out animation on a line of text. I want to keep it doing on regular interval (something like text flashing). I am using Observable for state triggering. This is my animations array: animations: [ …
    Paresh Nagore
    • 336
    • 2
    • 7
    • 23
    5
    votes
    1 answer

    Multiple animation triggers in angular2 Component

    I would like to define multiple animation triggers in one component. Is this possible? For example one for entering the scene and one for hover. Or do I need to define two components (parent child) for this case? item.compoennt.ts // removed the…
    Kevin Regenrek
    • 842
    • 2
    • 8
    • 17
    4
    votes
    1 answer

    Angular 2 animations is animating all the elements at the same time

    I want to animate an element by class. For example, for each div or whatever button, I have to trigger the animation I want to animate the specific element - target and not all the target elements at the same time. I get this result, but I dont…
    George C.
    • 6,574
    • 12
    • 55
    • 80
    4
    votes
    0 answers

    Dynamic variable inside angular @Component decorator

    I would like to pass dynamic variable to angular @Component class decorator. As you can see from example there is a list of items. I would like each item to be initially rotated with different degree -${DYNAMIC_DEGREE_VAR}. If I set transform to…
    Alex Kalmikov
    • 1,865
    • 19
    • 20
    1
    2 3 4 5 6