Question

有没有办法使用角度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;
}

使用Angular 2 animation docs

无法弄明白

Answer 1

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

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

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

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

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

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

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

1 个答案: