Stack Overflow
Stack Overflow

Questions tagged [angular-transitions]

It is about the CSS templates related to ngAnimate.

It is about the CSS templates related to ngAnimate. ngAnimate is the angular component and transitions is the CSS implementation for that component.

20 questions
6
votes
1 answer

Angular 1.2.5 nested animations

Using ng-view, I would like a simple fadeIn / fadeOut for page transitions. However, in different "views" I have child elements that I would like to animate at the same time as the fadeIn/fadeOut are happening on the parent element. The problem…
Ben
  • 291
  • 1
  • 3
  • 16
5
votes
1 answer

Angular 7 router animation with multiple router outlets

I am trying to add a transition between routes, following this article and several like it. I can indeed get it to work, but I am having issues using the CSS position-absolute this seems to require: router-outlet ~ * { position: absolute; width:…
Steve
  • 14,401
  • 35
  • 125
  • 230
5
votes
1 answer

Angular page transition animation of specific items

I would like to make route transition, but not simple slide out/slide in animations. I am looking for animation like this one on left ( https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif ) I know how to animate routes that will…
Eduard Stankovič
  • 63
  • 1
  • 6
4
votes
1 answer

How to animate child elements when ngClass changes on parent

Is it possible to define transitions on child elements and have ngAnimate taken them into account when ngClass changes for parent elements? So far I haven't been able to do this. http://plnkr.co/edit/ulq1MQNDtY9cO2pcjdzF?p=preview Thanks.
Francisc
  • 77,430
  • 63
  • 180
  • 276
3
votes
1 answer

Angular http client not working with translation on in IOS chrome browser?

I have angular project built in angular 10. I am getting issue in calling api from IOS chrome browser when i turn on google translation from browser. If i do not turn on translation it is giving me correct response for API However when i turn on…
Ninja Turtle
  • 1,293
  • 2
  • 24
  • 50
3
votes
2 answers

ng-animate: only add to the dom after the animation delay

I'm trying to use ng-animate with an ng-repeat (and ng-show) to fade out old content and replace it with new. The problem I'm having is that during the remove and add animations, both the element(s) being added and the element(s) being removed have…
Ed_
  • 18,798
  • 8
  • 45
  • 71
2
votes
0 answers

Error: this.currentLoader.getTranslation(...).pipe is not a function

I am using ngx-translate for one of the angular projects. When I try to load translation data from http post request, it is failing. The code is as below: import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injectable }…
Sushil Kumar Gupta
  • 180
  • 1
  • 1
  • 10
2
votes
1 answer

Animation transition not working - angular 6

I need to animate when opening and closing a Sidenav animations: [ trigger('slider', [ state('open', style( {} )), state('closed', style( {} )), transition('closed => open', animate('0.4s…
André Montório
  • 311
  • 1
  • 4
  • 14
2
votes
1 answer

Angular CSS ngAnimate translated to developer

ngAnimate when used with routings has different "CSS Styles" that can be set to produce different transitions. Is this the correct template that will cover all CSS Options for a transition? myAnimation = represent my css template. .myAnimation…
Dalorzo
  • 19,834
  • 7
  • 55
  • 102
1
vote
1 answer

How to adjust width of components in Angular while using Animations?

I am trying to use Angular Animations to slide my navbar and it's working perfectly but I need to adjust the width of my other components automatically when the navbar is hidden. Like I want my other components to take the width of whole page when…
Hassan
  • 45
  • 7
1
vote
1 answer

Angular Translation using key as a variable Not working

I am working on an Angular Js app and use the Angular-translate module In one case the translation may have its key as a variable so I created an object in the translations object with all possible variables . when I use it with dot notation like…
Peter Wilson
  • 4,150
  • 3
  • 35
  • 62
1
vote
1 answer

How to prevent state transition, when there is another transition running in angular ui router?

In my angular app, I have this issue. When user quickly double-clicks link to state (ui-sref link), the target state begins loading twice. This would be bearable, if the state window didn't freeze and stop responding to other state changes. When…
Rook
  • 13
  • 5
0
votes
1 answer

Is it possible to do a dynamic message translation in angular ngx-translate

I have a dynamic validation message from form controls and the message is from backend configuration. Is it possible to translate with angular ngx-translate? {{products.errors?.error | tanslate }} - not works. This error is dynamic…
Mohamed Sahir
  • 2,482
  • 8
  • 40
  • 71
0
votes
1 answer

How to get Angular Router Animations working with 'ng build --prod'?

I get errors when I want to build my angular app with 'ng build --prod': ERROR in src/app/route-animations.ts(15,9): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(20,15): Error during…
JuNe
  • 1,911
  • 9
  • 28
0
votes
0 answers

Angular 7 creating a card view and its detailed view in same page with a transition effect

I am a newbie in Angular7. I created a component in app.js and which shows a list of cards. what I want to build is on clicking the card view I need to show a detailed page with a transition effect. is there any example which implements the same…
Sibin Francis
  • 581
  • 2
  • 12
  • 30
1
2