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

Angular animations and services - error: Arguments array must have arguments

I am following the Angular.io guide for angular animations but have run into an error. This is the sample code they provided. export class Hero { constructor(public name: string, public state = 'inactive') { } toggleState() { this.state =…
Cuong Vo
  • 249
  • 1
  • 6
  • 16
0
votes
1 answer

How to create @angular/animations with parametres frome the component.ts?

I know how to add an agular animations with parametres from HTML, as follows: **Animations.ts** trigger('slowXMove', [ state('posX1State', style({ left: '{{posX1}}px' }), {params: {posX1: '0px'}}), state('posX2State', style({ left: '{{posX1}}px'…
Eimard
  • 31
  • 4
0
votes
2 answers

What is Angular Animation Version that supports to Angular 5?

I am new to Angular, So I need to know what is the suitable Angular Animation that works with Angular 5. And how I install it. Because latest version has mismatches with the Angular 5. Or I can't figure out what the error is. ERROR TypeError:…
0
votes
0 answers

window.innerHeight in Angular 6 Animations does not work

I am a bit confusing about my issue because it will run locally but does not run on server. The idea is to animate a table from state increased to the state reduced (and other way round) with window.innerHeight minus static value (e.g. 150) and on…
B00ling
  • 3
  • 1
  • 2
0
votes
1 answer

Slide a div from the bottom underneath another div with angular animations

As you can see in the screenshot below, I hava a tab on the bottom of my page. When I click on it, I want it to slide underneath the
containing "Test" using angular animations. The problem is, that the pagesize should be responsive and…
Rustius
  • 173
  • 1
  • 4
  • 14
0
votes
1 answer

Ionic 3 Animations Builder

I have an array that gets constantly updated, for every new entry I want to animate it. So I wrote this function: animateUserInput() { let userMsgLength = document.getElementsByClassName('usermessage').length; let lastElement; …
Sivvio
  • 297
  • 2
  • 7
  • 22
0
votes
1 answer

Angular 2 move element animation

I have a list of items with *ngFor. I want to animate an item moving up when a button inside the element is clicked. How do I do this with Angular?
amitairos
  • 2,907
  • 11
  • 50
  • 84
0
votes
1 answer

Angular Animation Value has change but not working

I have a question about I using the Angular Animation, If I write the click event, that is work. but I using the google.maps.event click that is not working. and the global value has changed. I think the value has changed but It has not affected the…
David Kross
  • 1
  • 1
  • 1
0
votes
1 answer

angular 5/6 animation issue with ngFor

using ngFor I am creating 4 card in my application. I want to use angular animation like If i am clicking on first card other three cards should fadeOut and first card should zoomOut. How can I achieve it html
Dinesh Kumar
  • 470
  • 1
  • 4
  • 17
0
votes
1 answer

Angular animate make element slide up from bottom instead of slide down from top

I recently tried Angular's animation on a slide in-out animation. I am having problem in getting my component to slide in from the bottom when opening. and then slide back down when closing. I have an example of having the current sliding animation.…
Danaley
  • 743
  • 3
  • 9
  • 17
0
votes
1 answer

Change body styles from component via angular animation

I have component modal-window and i want to make it full screen with angular animation. Now it is implemented as document.querySelector('body').classList.toggle('modal-fullscreen');. Also in css i have transition 0.3s for this animation. Now i need…
mr__brainwash
  • 1,334
  • 3
  • 16
  • 40
0
votes
1 answer

Angular animations - 2 trigger functions will not work

I recently installed the latest version of Angular and created a new project. Imported animations, everything works fine. As I try to use two trigger() functions, the second one will not work. If I comment out the first one, the second will work. I…
0
votes
1 answer

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

I have an Angular4 application (which was automatically generated by hyperledger composer). I installed angular/animations using the following command: npm install --save @angular/animations@4.0.0 I received the following…
Tommy
  • 699
  • 4
  • 11
  • 26
0
votes
1 answer

Easing not applying to Angular trigger transitions

I've created a 3-state sidepanel component that provides the following states: Collapsed - Sidepanel is completely hidden Thin - Icon is visible with tooltip Full - Icon and label are visible The issue I have is that transitions applied via a…
Jaime Still
  • 1,949
  • 20
  • 31
0
votes
1 answer

Angular 5 animations, rotateZ

i have traying to make a rotation animation over a group of images using the angular animation library but i can't make it work. task: import the BrowserAnimationModule [done] import the animations functions in my component [done] so this is the…
Gytree
  • 542
  • 3
  • 13