Stack Overflow
Stack Overflow

Questions tagged [angular2-animation]

81 questions
2
votes
0 answers

Run Angular2 animations on item change

I have the following code: Whenever the selectedItem changes, I want to make a smooth transition between the items. I decided to try this from the docs: animations: [ …
TheUnreal
  • 23,434
  • 46
  • 157
  • 277
2
votes
1 answer

Angular animation error - Reduce of empty array with no initial value

When adding animation to a component I get the following error in the console: Reduce of empty array with no initial value My Angular Version: 2.0.0 The animation code: animations: [ trigger('routerTransition', [ state('void', style({…
Tjaart van der Walt
  • 5,149
  • 2
  • 30
  • 50
2
votes
0 answers

How can I arrange Angular2 animations in a sequence?

Suppose I have a list of menu links or other elements, that I would like to animate consecutively on their entrance. I would like to keep the code and concept as clean as possible. How do I do it in Angular2?
Marek Dulowski
  • 1,561
  • 11
  • 18
2
votes
2 answers

Angular 2 - pass delay to component animation as input parameter

I want to pass in the delay of a component's animation from the html eg: html: ts: @Component({ selector: 'circles', templateUrl: 'app/landing-page/subcomponents/circles.component.html', styleUrls:…
BeniaminoBaggins
  • 11,202
  • 41
  • 152
  • 287
2
votes
1 answer

How to apply animation state changes in Angular 2

I am looking a possibility to realize pretty pages sliding animation in my Angular 2 RC-6 application. I got as example this article https://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm But…
vit_vostotskiy
  • 83
  • 7
2
votes
1 answer

Angular2 animation '* => void' transition not activating with *ngFor Component item

Plunker example https://plnkr.co/edit/uUs4U63mEItIRvL4nL7s?p=preview I have a ul of li notifications that slide in when added. I'd like them to slide out when they're deleted but the transition('* => void') doesn't seem to take effect and they just…
andyrue
  • 903
  • 10
  • 24
1
vote
0 answers

Angular 9 animation - how to animate individual destruction of components without wrapping them in a new div?

Is it necessary to wrap a component in an element (like div) that has @animation on itself in order to animate the destruction of that component? Here's what I tried so far: stackblitz Basically, I want this:
ucimo
  • 105
  • 11
1
vote
1 answer

How to remove ng-tns class which is adding automatically while using angular 2 animation

@Component({ ... animations: [ trigger('slideInOut', [ transition(':enter', [ style({transform: 'translateY(-100%)'}), animate('200ms ease-in', style({transform: 'translateY(0%)'})) ]), transition(':leave',…
user10780294
1
vote
0 answers

How in angular 2+, dynamically manage the addition of animations (:enter and :leave) under certain conditions?

I'm working on an animation for :enter and :leave from the pages. import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core'; export const slideInDownAnimation: AnimationEntryMetadata =…
Михаил Греков
  • 19
  • 2
1
vote
0 answers

BrowserAnimationsModule generates error when added to app.module

I'm using the dotnet SPA template to create a new angular app. But I get an error when I add the BrowserAnimationsModule on the app.module.shared.ts: > tslib.es6.js:22 Uncaught TypeError: Object prototype may only be an Object or null: undefined …
Magikarp
  • 492
  • 6
  • 19
1
vote
0 answers

Angular 2/4 Variables in animations

I'm trying to use Angular animations with variables and I've made some mistakes I can't figure out, what I would like to accomplish is to "move" a "tab" on the "li" elements of my sidebar. here is my HTML:
ALGDB
  • 650
  • 1
  • 6
  • 22
1
vote
1 answer

Injecting data from component functions into Angular2 animations

In angular 2 I am trying to use @angular/animations to make a component where a
  • element follows the mouse (ondrag) and stays in position after (ondragend). I am quite new to angular and very lost on what the best way to tackle this problem is.…
    • Y Anderson
    • 427
    • 3
    • 5
    • 15
    1
    vote
    0 answers

    angular 2 animation group bug apply only 2 last animation

    I'm trying to animate a button on X and Y directions , by 4 steps with different timing configurations, with group animation, but find out that only the last two animation works! it ignores the first 2 animations. why that happening? I'm doing…
    user6070921
    • 9
    • 2
    1
    vote
    0 answers

    How to make delay between each animation in Angular2

    I made some changes in Angular2 animation example in this plunker I want to make animations in a way that when I click on Add All Heros or Remove All Heroes each item comes or goes during the prev one, right now they all come or go with each other.…
    Reza
    • 18,865
    • 13
    • 88
    • 163
    1
    vote
    2 answers

    Angular2 animations [@triggerName] not working in *ngFor

    Basically I want to be able to apply my animation to a specific box when a condition is fulfilled. In my app this need to happen when the user give an answer for question1 (in Component1) -> through a shared service -> in COmponent2 I get notified…
    sTx
    • 1,213
    • 13
    • 32
    1 2
    3
    4 5 6