Angular animate element while changing position?

Question

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 relative state and I can't send in parameters).

The problem is that the position applies to the animation exactly half way through the transition time. So if I set it for 5 seconds, at 2.5 seconds the div will change from relative to fixed. This causes the animation to jump randomly and start animating from a different spot after 2.5 seconds. Is this normal behaviour?

I've created a (basic) plunkr to show what I mean:

https://plnkr.co/edit/kSnGSqZUIkMn7y3Vv2bm?p=preview

The HTML:

  <div style="position:relative; top:0; left:0; width:20%; height:20%"
  [@routerTransition]="animation">
    <h2>Home</h2> 
  </div>
  <button (click)="animateBox()"> Animate </button>

And the animation:

return trigger('routerTransition', [
    state('*', style({   })),
    transition('* => move', animate(5000, style({position: 'fixed', left: "500px",  top: "500px",  })))

I can fix this by applying position: fixed at the very start of the animation, e.g.:

state('move', style({ position:"fixed"  })),

however then the element does not move from its starting position but rather from the fixed position.

Is there a way to start the animation from the relative position but then animate it to a different (fixed) position while avoiding the "jump" midway through?

I don't know how but I can't still understand what exactly you want? — micronyks, Aug 27 '17 at 14:21
Relative animations like this are _incredibly_ difficult to code, and likely beyond the scope of what you're attempting. It's possible, but requires quite a bit of complex code for a simple animation. — Z. Bagley, Aug 27 '17 at 14:26
Can't really solve your problem... but I will say - in general, animating fixed position elements is prone to bugginess. Animating 'top' and 'left' in general is, but moreso w/ fixed position. Except for some very exceptional circumstances, I always choose to animate transform (translate3d(x,y,z)) instead — diopside, Aug 27 '17 at 16:28

score -1 · Answer 1 · edited Jun 20 '20 at 09:12

This is the best way you can fix this just detect when the scroll is more than your pixel you want and add some variable true or false after you detect that you can add some CSS class and that's it.

Some code example.

yourComponent.html

<md-card  [class.fixed]="navIsFixed">
    <img src="{{Product.image_url}}" style="width:100%;" alt="">
</md-card>

yourComponent.css

.fixed {
  position: fixed;
  width: 250px;
  top: 20px;
  z-index: 2;
}

yourComponent.ts

import { Component, OnInit, HostListener, Inject } from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'app-client-product-prev',
  templateUrl: './client-product-prev.component.html',
  styleUrls: ['./client-product-prev.component.css'],
})

export class yourComponent implements OnInit {

  public navIsFixed: Boolean = false;
  
  constructor(){}
  
  ngOnInit() {

  }


  @HostListener("window:scroll", [])
  onWindowScroll() {
    const number = this.document.body.scrollTop;
    if (number > 300) {
      this.navIsFixed = true;
      console.log(number);
    } else if (this.navIsFixed && number < 300) {
      this.navIsFixed = false;
    }
    
  }




}

Angular animate element while changing position?

1 Answers1

yourComponent.html

yourComponent.css

yourComponent.ts