Angular 角度2动画-将图像从一个div设置为另一个div的动画

有没有办法使用angular 2动画将图像从一个div设置为另一个div的动画

示例代码：

    <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;
}

place1
地点2
地点1{
位置：绝对位置；
顶部：50px；
右：50px；
}
地点2{
位置：绝对位置；
底部：50px；
左：50px；
}

---

无法通过在选定CSS属性的状态之间转换来使用CSS动画工作。在div css定义中，右上角由

top

和

right

属性定位，左下角由

bottom

和

left

属性定位。我不知道如何从

左

值转换到

右

值，因为这是定义元素位置的两种不同方式

幸运的是，您可以使用相同的属性使用和定义两个div的位置，

top

和

left

：

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

现在，您可以设置顶部和左侧属性的动画，并定义它们之间所需的过渡：

  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" )),
    ])

动画：[
触发（“移动”[
状态（“右上角”，样式（{左：“计算（100%-128px）”，顶部：0}），
状态（“bottomLeft”，样式（{left:0，top:“calc（100%-128px）”}），
过渡（“上右下左”，动画（“300毫秒缓进缓出”），
])

然后将此动画绑定到图像，该图像的初始位置应与右上方的div相同：

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

完整工作示例：