CSS 过渡 : Div does not move back to its original place

Question

在我的 style.css 中我有这段代码:

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

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

单击按钮时，具有框类的 div 会向右移动，这是应该的。单击另一个按钮时，它应该回到原来的位置。

正如您在我的代码中所见，向右移动和稍后向后移动的值是相同的 (200px)。然而，它并没有回到同一个空间，而是移到了更远的地方。

我想，问题可能是没有来源，我在盒子类中添加了一个。但问题依然存在。

为什么会这样？

编辑:

这是我的代码:

样式.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 的代码如下所示:

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

可能值得注意的是，div 放置在 Bootstrap 和 angularjs 应用程序中。

Answer 1

当点击按钮时，方框向右移动 { 转换:翻译(200px，0px)； 当再次点击时，它应该移动到第一位。 { 转换:翻译(0px，0px)； }

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

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