CSSトランジション：事業部は、私はこのコードを持っている私のstyle.cssでは元の場所に

Question

を移動しません：

.box { 
    transform-origin: left top; 
} 
.to-right { 
    transform: translate(200px, 0px); 
} 

.to-left{ 
    transform: translate(-200px, 0px); 
    background-color: yellow; 
} 

ボタンをクリックすると、右側のボックスクラスに移動するとdiv要素として、そうすべき。別のボタンをクリックすると元の場所に戻ります。

私のコードでわかるように、右と後ろに移動する値は同じです（200ピクセル）。しかし、同じ空間に戻って移動するのではなく、遠くに移動します。

私は、起源がなく、ボックスクラスに1つを追加したという問題が考えられました。しかし、問題は残っている。

どうしてですか？

編集：ここでは

が私のコードです：

<div class="box move" ng-class="{'box': boxClass == 1, 'to-right': boxClass == 2, 'to-left': boxClass == 3} "> 

たぶん、注目に値する、DIV：

のstyle.css

.box { 
    transform-origin: left top; 
    position: absolute; 
} 
.to-right { 
    transform: translate(200px, 0px); 
} 

.to-left{ 
    transform: translate(-200px, 0px); 
    background-color: yellow; 
} 

.move { 
    transition: all 1s ease-in-out; 
} 

はdivのためのコードは次のようになりますブートストラップとanglejsアプリケーション内に配置されます。

Answer 1

ボタンをクリックすると、ボックスが右に移動します { transform: translate(200px, 0px); } もう一度クリックすると、最初に移動する必要があります。 { transform: translate(0px, 0px); }

.to-right { 
    transform: translate(200px, 0px); 
} 

.to-left{ 
    transform: translate(0px, 0px); 
    background-color: yellow; 
}