角度2のアニメーション - あるdivから別のdivに画像をアニメ化する

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の値への遷移方法はわかりません。これは、要素の位置を定義する2つの異なる方法であるためです。

幸いにも、あなたはCSS calculationsを使用し、同じプロパティを持つあなたの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")), 
    ]) 

そして、あなたはあなたのイメージにこのアニメーションを結合し、それはあなたの右上のdivと同じ初期位置を持つ必要があります

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

完全な実施例：https://plnkr.co/edit/aVwOYM4Xw9vD75vMjGBc?p=preview