使用 css 正确转换？

Question

我正在尝试使用 only 转换使框从左向右滑动 像这样：

#box {
  width: 150px;
  height: 150px;
  background: red;
  position:absolute;
  transition: all 2s ease-out;
  right:auto;

}

.active{
  background-color: green !important;
  right:0 !important;
}

<div id="box" onclick="this.classList.add('active')"></div>

但由于某种原因，盒子没有向右滑动

This 解决方案有效，但没有解释
有人可以解释为什么背景颜色转换但位置不正确吗？

Answer 1

使用right: auto; 不起作用。

#box {
  width: 150px;
  height: 150px;
  background: red;
  position:absolute;
  transition: all 2s ease-out;
  right:100%;
  transform: translate(100%,0);

}

.active{
  background-color: green !important;
  right:0 !important;
  transform: translate(0,0) !important;
}

<div id="box" onclick="this.classList.add('active')"></div>

Answer 2

尝试改用animation 并添加关键帧，如下面的 sn-p 所示。

#box {
  width: 150px;
  height: 150px;
  background: red;
  position:absolute;
  animation: slide 2s forwards ease-out;
  right:auto;

}

  @keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(50%);
    }
}

 <div id="box"></div>

Answer 3

您必须以 px 或 % 为单位指定框的“正确”属性，而不是“自动”。

#box {
  width: 150px;
  height: 150px;
  background: red;
  position:absolute;
  transition: all 2s ease-out;
  right:calc(100% - 150px);   /* right is positioned to left by reducing the actual box width */

}

.active{
  background-color: green !important;
  right:0 !important;
}

<div id="box" onclick="this.classList.add('active')"></div>