CSS Transitions: Div nicht wieder an ihren ursprünglichen Platz

Question

In meinem style.css bewegt habe ich diesen Code:

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

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

Wenn eine Schaltfläche geklickt wird, die div mit der Feldklasse nach rechts bewegt, wie es sollte. Wenn auf eine andere Schaltfläche geklickt wird, sollte sie an ihren ursprünglichen Ort zurückkehren.

Wie Sie in meinem Code sehen können, ist der Wert für die Bewegung nach rechts und später gleich (200px). Anstatt sich jedoch auf denselben Raum zu bewegen, bewegt es sich weiter weg.

Ich dachte, das Problem könnte sein, dass es keinen Ursprung gibt und ich einen der Box-Klasse hinzugefügt. Aber das Problem bleibt bestehen.

Warum passiert das?

EDIT:

Hier ist mein Code:

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; 
} 

Der Code für das div wie folgt aussieht:

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

Vielleicht bemerkenswert, die div befindet sich in einer Bootstrap- und angularjs-Anwendung.

Answer 1

Wenn Sie auf die Schaltfläche klicken, bewegt sich das Feld nach rechts { transform: translate(200px, 0px); } und wenn Sie erneut klicken, sollte es an erster Stelle verschoben werden. { transform: translate(0px, 0px); }

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

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