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

NativeScript Angular 5 Animations not doing anything

I'm using NativeScript with Angular 5. "tns-core-modules": "~3.4.0", "nativescript-angular": "~5.2.0", "@angular/animations": "~5.2.0", And I'm trying to get animations to work, but I can't get anything to happen at all. Not even any errors. Here's…
user1513171
  • 1,912
  • 6
  • 32
  • 54
0
votes
1 answer

How to restart animation - ionic

I have animation that needs to restart on a click. this is my animation : /* scss file */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; animation-duration: 1s; } On click this…
Amjed Omar
  • 853
  • 2
  • 14
  • 30
0
votes
1 answer

Angular Animations - Dynamic and Responsive translations

I have a component that is usually dormant (by which I simply mean it is of little interest to the user), but in a certain state this component becomes 'activated' and I want to put it in the exact center of the screen and enlarge it to grab the…
ZackDeRose
  • 2,146
  • 1
  • 16
  • 28
0
votes
0 answers

Angular2 table rows animation

I have a table which its rows creates by collection, like this plnkr - example and this code @Component({ selector: 'my-app', template: `
{{element.name}}
0
votes
1 answer

Angular 4's HostListener's window:scroll fires continuously after user stops scrolling

I have a HostListener that watches scroll position to apply an Angular animation once user scrolls to a certain position. As user scrolls, the method attached to HostListener fires. When user stops scrolling, then the method stops firing as…
Tom Schreck
  • 5,177
  • 12
  • 68
  • 122
0
votes
0 answers

Angular4 - `query(":enter") returned zero elements for dynamic data

I want to create a really simple list animation in Angular4. But I have some problem. The stagger animation with static data works fine, but with dynamic data - won't work. Here is my sample code: app.component.html
t.piwowarczyk
  • 365
  • 2
  • 5
  • 17
0
votes
0 answers

creaate list sorting filter animation in angular +4

I am trying to implement animation on filter list and sort list. i searching to get this result: https://razorjack.net/quicksand/ thanks.
haim
  • 589
  • 3
  • 7
  • 11
0
votes
1 answer

Angular 4 Animation not working in Edge

I created an animation that I use throughout the project, but it is not working in Edge browser. This is the code I am using, anyone knows what I can do to fix it? import {animate, state, style, transition, trigger} from '@angular/core'; export…
Nemanja Grabovac
  • 858
  • 2
  • 15
  • 30
0
votes
1 answer

Angular 2+ Enter animation on child component works but leave does not

i have a sub component like this @Component({ selector: 'is-time-controlled', templateUrl: './is-time-controlled.html', styleUrls: ['./is-time-controlled.less'], animations: [ trigger( 'myAnimation', [ transition( …
Raas Masood
  • 1,475
  • 3
  • 23
  • 61
0
votes
1 answer

Angular 4 smooth animation

I'm trying to do a kind of Homepage in Angular 4 with different cards like stats, charts etc using some animations. For the chart cards I made an icon button to toggle the div to make it bigger (fullscreen-like). The animation code currently works…
Maeglin
  • 3
  • 1
  • 3
0
votes
1 answer

Is it possible to add image behind doughnut chart with transparency color in ng2chart?

I have the requirement to add image behind ng2 doughnut chart with transparency color, the image will be in doughnut chart behind the color and not beyond that and not center of doughnut chart. is it possible to do it programtically. it is single…
Mohamed Sahir
  • 2,482
  • 8
  • 40
  • 71
0
votes
3 answers

Random animations in Angular

Consider the following code:
Is there a way to cause aforementioned div to disappear with random animation? Random animation being, for example, rotation of the…
Alex Lomia
  • 6,705
  • 12
  • 53
  • 87
0
votes
1 answer

Calling an angular animation an a single li item

This is my first try at any angular animation. My aim is to simply animate an li when it is removed from the list. I think I'm calling everything right, but it seems to be animating all the li items, instead of just the one deleted. Do I need to get…
Draxy
  • 565
  • 3
  • 6
  • 20
0
votes
1 answer

Angular 4 : "export 'AnimationBuilder' was not found in '@angular/animations'

I was using these versions "dependencies": { "@angular/animations": "^5.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http":…
ricky
  • 1,644
  • 1
  • 13
  • 25
0
votes
1 answer

CSS animate expanding component

I have 2 card sections side by side using flex box. Each box has a toggle to 'expand'(e.g. if I expand the right, it just hides the left card section and vice versa). I basically want to animate the expanding card but I dont know how to, or if it's…
Magikarp
  • 492
  • 6
  • 19