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）。但是，它不会移回相同的空间，而是移动得更远。

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

为什么会这样？

编辑：

这是我的代码：

的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的代码如下所示：

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

也许值得注意的是，div被置于bootstrap和angularjs应用程序中。

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

CSS过渡：Div不会移回原来的地方

1 个答案: