Angular 2 动画 - 将图像从一个 div 动画到另一个答案

【问题标题】：Angular 2 animations - animate an image from one div to anotherAngular 2 动画 - 将图像从一个 div 动画到另一个
【发布时间】：2017-01-07 15:24:00
【问题描述】：

有没有办法使用 Angular 2 动画将图像从一个 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;
}

使用Angular 2 animation docs 无法弄清楚

【问题讨论】：

标签： angular

【解决方案1】：

CSS 动画通过在选定 CSS 属性的状态之间转换来工作。在您的 div css 定义中，右上角由top 和right 属性定位，左下角由bottom 和left 属性定位。我不知道如何从left 值转换为right 值，因为这是定义元素位置的两种不同方式。

幸运的是，您可以使用 CSS calculations 并使用相同的属性定义两个 div 的位置，top 和 left：

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

现在您可以为 top 和 left 属性设置动画，并定义它们之间所需的过渡：

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

你把这个动画绑定到你的图片上，它的初始位置应该和你右上角的 div 一样：

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

完整的工作示例：https://plnkr.co/edit/aVwOYM4Xw9vD75vMjGBc?p=preview

【讨论】：