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
1 answer

How can I query for :enter and :leave of a UI-VIEW for animation in Angular 4 using a trigger that wraps the entire UI-VIEW directive

So in Angular 4.2+ there is a new Query animation function that allows you to Query for various things (:enter, :leave, class names, elements, etc) and you can apply animations to them. The KEY concept that I am trying to solve is that you are…
0
votes
1 answer

Applying a style during animation transition breaks the transition

I am trying to create an animation transition which applies a constant style while the transition is taking place. Here is my trigger structure: animations: [ trigger('bigTrig', [ state('bigSt', style({ transform: 'scale(1.3)', …
Aviad P.
  • 32,036
  • 14
  • 103
  • 124
0
votes
1 answer

animation is being applied to all list items at once

I am trying to apply angular animation to individual list item. On mouseover it gets some color and on mouseleave the color changes. the list is being generated using ngFor. Problem is when I hoverover one li item, all of the li items get…
SONGSTER
  • 585
  • 3
  • 11
  • 28
0
votes
1 answer

Staggering animation on just the new items of a list using Angular animations?

In angular you can stagger animations, as I'm doing here for instance:
Sawri
  • 76
  • 1
  • 7
0
votes
1 answer

Angular4 - best way to use a carousel for items

I'm trying to get working a carousel of items (not images). It is an array of objects of a given type: IMyObject. Because I wanted to have one item displayed at a time I did not use ngFor for it. Instead, once I did fetch all the objects I would use…
Carlos Torrecillas
  • 4,965
  • 7
  • 38
  • 69
0
votes
1 answer

Angular animation for specific states

i want to make different animations for specific state change. I'm based on this: https://scotch.io/tutorials/animating-angularjs-apps-ngview and it works properly, but i want something like this: state is changed from A to B - slide views from…
0
votes
1 answer

Angular 2: Cannot find module '@angular/animations/browser'

I'm tryng to install Angular2-Toaster (https://github.com/Stabzs/Angular2-Toaster), in the example I successful to install npm install angular2-toaster and I can inmport it withoud errors, but how I see I need also animations so I installed…
Nammen8
  • 619
  • 1
  • 11
  • 31
0
votes
1 answer

Recursion not supported, resolving symbol routerAnimation

I'm trying to build my Angular 4.3 application in --prod mode and I get the following error (normal build works perfectly): ERROR in Recursion not supported, resolving symbol routerAnimation in .. This is how my admin.component.ts looks…
TheUnreal
  • 23,434
  • 46
  • 157
  • 277
0
votes
0 answers

Angular 4 animation - no animation / duration

I try to animate an element in Angular 4 in terms of its height. Regardless of whether I use margin-bottom or height as attributes to be changed, the change is done, but without animation, meaning, the height/margin-bottom value is jumping from…
Chris R.
  • 415
  • 2
  • 5
  • 15
0
votes
2 answers

Dynamically change enter/leave animation class name

I have ng-repeat and I want to change the enter/leave animation based on variable from the controller(vm). I found this (http://www.nganimate.org/) but its for angular 1.1.5 and I am using 1.5. How can I do that? Thanks!
0
votes
0 answers

Animate div on created Angular 2

I'm new to angular animations, and i've run into a problem. i have a stacked dropdown menu, and when i click a menu item, i want it to be animated like it's sliding into view. i'm using bootstrap4, and the div is display: none, in it's first state,…
FussinHussin
  • 1,718
  • 4
  • 19
  • 39
0
votes
1 answer

uib-tabset dynamic index not working

I am trying to set uib-tabs dynamically. I mean I have written all the codes in html and only taking index dynamically see the code. I have simplified the example here. I gave index="1" to very first tab but it's not working as required.
0
votes
1 answer

Angular 2 - How to implement Router Animation for a particular div?

I have here a list of div, I want to slide a particular element on click. Currently all elements are sliding as state is a single variable for all elements. .html
Sai Datta
  • 895
  • 1
  • 9
  • 25
0
votes
1 answer

Angular Disable Animation

I am using an Angular Widget (http://alexsuleap.github.io/) and it has some animations. The widget itself does not have any option to disable the animation. But the widget is using angular-animate.min.js. Is it possible in some way to disable all…
Noor
  • 19,638
  • 38
  • 136
  • 254
0
votes
1 answer

Angular 4 + Jest-Preset-Angular : testing animation on host with trigger imported from file

I am having an issue issue when running tests with Jest-Preset-Angular on a component that has an animation on host element imported from a seperate file (so it can be reused in another component). example.animation.ts import { trigger } from…
j3ff
  • 5,719
  • 8
  • 38
  • 51