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

How to add Angular animations to components?

I am using Angular 4, I have two components, a nested component (parent-child), simply imagine my child component name is child, and obviously I can import my child to its parent view by using HTML element. I have an animation and when I…
0
votes
1 answer

Angular 4 Routing Change Animation

I'm trying to do simple fade animation on route change, but it doesn't work. My animation file it's like this: export class RouterAnimations { static animate() { return trigger('routerTransition', [ state('void', style({…
tiagor87
  • 15
  • 1
  • 5
0
votes
1 answer

Angular Animation. Updating animation state after an event

Say I have the following in my components html

Author: {{ box.author }}

and in the controller: delete(box: any){ //opens an…
0
votes
3 answers

Angular 2 Animation Error

I tried to make a simple Animation with Angular: import { Component, animate, trigger, state, style, transition } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls:…
Lasse Sb
  • 81
  • 9
0
votes
1 answer

animation in angular 2

I try to add an animation in child template:
the function toggleAnimateState() in item.component.ts: toggleAnimateState() { …
MedKostali
  • 223
  • 1
  • 5
  • 16
0
votes
1 answer

Repeatable animation in angular2

I need to make a repeatable animation when hover a link. I've made a route link component which contains that animation: import { Component, Input, OnInit, trigger, state, style, transition, animate } from '@angular/core'; @Component({ moduleId:…
ohadinho
  • 6,894
  • 16
  • 71
  • 124
0
votes
1 answer

Angular2 animation trigger

I am unsing Angular2 @angular/core 2.2.1 and I want trigger my "bad credentials" animation multiple times, each time the credentials were bad. Heres my idea: @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls:…
Pascal
  • 2,059
  • 3
  • 31
  • 52
0
votes
1 answer

Applying animation effects for angular2 animations effects

I am trying to apply animations to the md-card(trying to replicate the https://teradata.github.io/covalent/#/components/expansion-panel) ...I am able to get the view and apply the animations but the transition when a card is expanded/collapsed is…
abhilash reddy
  • 1,546
  • 8
  • 31
  • 53
0
votes
0 answers

Angular 2 determine state based on element class

I have carousel in Angular 2 and I want to add transitions to it. I did Tour of Heroes tutorial and so I have in app.component.ts:
0
votes
2 answers

Angular 2 animations

Is it possible to animate elements on Angular 2 like on jQuery? For example, I want div containing sub-elements to expand/shrink when clicked. Does Angular 2 provide directives for this, or do I have to call jQuery inside Angular event handlers ?
Tuomas Toivonen
  • 21,690
  • 47
  • 129
  • 225
-1
votes
1 answer

Angular 2+ flip animation not working properly with ngIf

I want to implement a smooth card flip animation with ngIf CODE: https://stackblitz.com/edit/angular-card-flip-2wj64j?file=app%2Fcard%2Fcard.component.html current output: ==================CODE================= HTML
Parth Developer
  • 1,371
  • 1
  • 13
  • 30
-1
votes
1 answer

How to get Angular translate animation to change direction

I have an Angular application where I have a few components I want to use a button to show/hide. So I have:
-1
votes
1 answer

Angular router animation not triggering

In my angular app I would like the router transitions be animated: the leaving component should fade-out and after that, the entering component should fade in. Basic stuff I would say :) So I created this stackblitz (some of the code in there was…
Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
-1
votes
1 answer

Use div to mask slide in animation

I have div that contains an image that is animated to slide in from the right. How can I use the div to clip/mask things so that the viewport for the animation is only within the div. See example below, where the ball animates in from the right and…
chumtoadafuq
  • 256
  • 5
  • 14
-1
votes
2 answers

Why simple angular routing animation not working?

I have very basic routing angular animation, but for some reason it's not working. Animation definition is in app.component.ts <= there I have and two links that when are clicked should route to appreciative…