Stack Overflow
Stack Overflow

Questions tagged [angular2-animation]

81 questions
4
votes
1 answer

Angular2 animation is slow on long lists

I'm using angular animation on a list component, a slide-in-out animation. It works fine when the list is short, but when I have more then 50 items on the list, the animation is laggy. What is the cause of that? how can it be solved?
sangress
  • 599
  • 5
  • 11
4
votes
1 answer

Angular2 animate when model changes

I have component PageComponent which data is renewed on different url. I want animate when Page model is changed. In my given sample animation works only first time when PageComponent is loaded. What should I add / change that animation would work…
Ugnius Malūkas
  • 2,649
  • 7
  • 29
  • 42
3
votes
1 answer

Angular 2 - Animation show/hide not work with component tag

I'm working on animation for showing and hiding a component. My Plunker: https://embed.plnkr.co/BxT8SKBq8JwuPP16FDu4/
3
votes
1 answer

Angular animate element while changing position?

I'm trying to animate a div in my angular project so that it moves across the screen. The div is relatively positioned (as there are multiple elements) but when I apply animation I change it to fixed (as I can't get the exact location from a…
user3129594
  • 391
  • 2
  • 21
3
votes
1 answer

Angular. Animating flex elements

Hello. I have a small component that looks like so: when search is clicked it turns into: In the markup there are two flex elements: for header (flex: 1) and for search. On search click I hide first one and expand second one. Now I want to animate…
Sergey Sokolov
  • 2,709
  • 20
  • 31
3
votes
0 answers

angular2 animation error while a prior animation is in progress: ERROR TypeError: Cannot read property 'hasOwnProperty' of undefined

i'm incurring: ERROR TypeError: Cannot read property 'hasOwnProperty' of undefined at http://0.0.0.0:4200/vendor.bundle.js:34007:40 at Array.forEach (native) at WebAnimationsPlayer.init (http://0.0.0.0:4200/vendor.bundle.js:34006:32) …
okhobb
  • 758
  • 8
  • 22
3
votes
2 answers

Angular2 animation for watch-timing

When time changes, eg. second/min/hours/day , I want to put an animation in a particular div block. Maybe I'm not able to figure out how to go ahead. Demo : https://plnkr.co/edit/jvffeaWFCF6eazdIt3OT?p=preview when second changes, number should come…
micronyks
  • 54,797
  • 15
  • 112
  • 146
3
votes
1 answer

how to apply different animation between different route in angular 2

I have a test app build with angular 2, I have successfully applied one animation between route change state('default', style({ opacity: 1, transform: 'scale(1) translateY(0)' })), transition('void <=> default', [ style({ opacity: 0,…
Gavin
  • 101
  • 6
2
votes
0 answers

Using jquery animation angular 5 animation way(for smooth scroll)

I am using jquery for smooth scroll this way $('.parent-class').animate({ scrollTop: $('#scrllhere').offset().top + 10 }, 800); Goal here is on click, i am calling one function based on certain condition i am using above code for scroll this is…
Vicky Kumar
  • 1,358
  • 1
  • 14
  • 26
2
votes
1 answer

How to do Animation Anchoring in Angular 2?

There is an animation feature that exists in AngularJS 1.4 that is called Animation Anchoring. When routing to a new route, it allows to mark an element in the source and destination page with the attribute ng-animate-ref, and performs a computed…
Maxime
  • 21
  • 1
  • 4
2
votes
1 answer

Choppy angular animations in firefox (intergrating web animations js in angular project)

What is the proper way of integrating web animations js in an angular 2 project? I have done the necessary steps provided here. But the animations in firefox are still choppy. I have created a new angular project using the latest angular cli…
Safal Pillai
  • 1,567
  • 1
  • 16
  • 31
2
votes
2 answers

Angular 2+ Animation- Changing color on body element

I am a beginner programmer, and I recently started to learn Angular 4. I am trying to make a personal site and want to add some animations. On the top of the page, I have a jumbotron with a logo. I want it so that so that when I click on this logo,…
Chaewon Min
  • 73
  • 2
  • 7
2
votes
1 answer

Angular 2 page transition while leaving page

I am trying to do page transition animation using Angular 2. The basic requirement is that the page should there should be animation while entering and leaving the page.The animation works fine while entering the page but while leaving the page to…
PPP
  • 21
  • 1
2
votes
0 answers

Rxjs debounceTime on Subject creates delay instead of debounce

I am trying to create the Subject that would start the animation on click of the button, i dont wont users to be able to call it when the last animation has not finished yet. construcotor(...){ this.shuffleBackwardAnimationSubject = new…
Dmitrij Kostyushko
  • 636
  • 1
  • 8
  • 20
2
votes
1 answer

How to change flex-layout using Angular2 animations?

I made my first steps in @angular/animations with help of official tutorial. I added reqired libraries and i create my first animation. I already know what transition and state is. I can create simple animations (changing background colors and…
Jaroslaw K.
  • 5,224
  • 2
  • 39
  • 65
1
2
3 4 5 6