Angular 2动画-将图像从一个div动画到另一个 [英] Angular 2 animations - animate an image from one div to another

问题描述

是否可以使用角度2动画将图像从一个div动画化为另一个div?

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

示例代码:

    <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动画文档

推荐答案

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

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.

幸运的是，您可以使用 CSS计算并定义您的具有相同属性top和left的div位置:

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

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

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>

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

这篇关于Angular 2动画-将图像从一个div动画到另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！