CODEWITHSUNDEEP
angular
TheUnreal
TheUnreal

Reputation: 24472

Angular 2 animations - animate an image from one div to another

Is there any way to animate an image from one div to another using angular 2 animations?

Example code:

    <div class="place1">PLACE 1
<img src="IMAGE"> <!--move that image to PLACE 2-->
</div>

    <div class="place2">PLACE 2</div>

place1 {
position:absolute;
top:50px;
right:50px;
}

place 2{
position:abvsolute;
bottom:50px;
left:50px;
}

Couldn't figure it out using the Angular 2 animation docs

Upvotes: 1

Views: 2821

Answers (1)

Andr&#225;s Szepesh&#225;zi
Andr&#225;s Szepesh&#225;zi

Reputation: 6763

CSS animations work by transitioning between states of selected CSS properties. In your div css definitions, the top right corner is positioned by top and right properties, and the bottom left corner is by bottom and left properties. I don't know of any way how to transition from a left value to a right value, because these are two different ways of defining an element's position.

Luckily, you can use CSS calculations and define both your divs' positions with the same properties, top and left:

.place1 {
  position: absolute;
  top: 50px;
  left: calc(100% - 128px);
}
.place2 {
  position: absolute;
  top: calc(100% - 128px);
  left: 50px;
}

Now you can animate both the top and the left properties, and define the required transitions between them:

  animations: [
    trigger("move", [
      state("topRight", style({left: "calc(100% - 128px)", top: 0})),
      state("bottomLeft", style({left: 0, top: "calc(100% - 128px)"})),
      transition("topRight <=> bottomLeft", animate( "300ms ease-in ease-out" )),
    ])

And you bind this animation to your image, that should have the same initial position as your top right div:

<div class="moveMe" @move="state">
  <img src="your image URL">
</div>

Full working example: https://plnkr.co/edit/aVwOYM4Xw9vD75vMjGBc?p=preview

Upvotes: 1

Related Questions