为什么 transform:translatex 在这个 css class 中没有把 div 移到一边？

Question

我想在屏幕上移动 div。 div 最初设置为 width:100%。但是当转换开始时，div 的大小似乎缩小了（蓝色边框刚好环绕在文本周围）。为什么会这样？

之前

之后

这是我的代码示例

Javascript:

$(document).ready(function () {
  init();
});

function init() {
  $('input').on('click',
    function () {
      $('.answer-text-2').closest('.answer').addClass('textout');
      $('.answer-hide').addClass('textin');
    });
}

css

.row {
}

.hidden {
  display: none;
}

.answer-text-2 {
  color: red;
  opacity: 1;
  margin: auto;
}

.answer-text-2-new {
  color: blue;
  opacity: 0;
  margin: 500;
}

.textout {
  /* display: none; */
  margin: -500;
  opacity: 0;
  width: '50%';
  transition: all 3s ease-in-out;
}

.answer-hide {
   border: 1px solid blue;
   width: '100%';
}
.textin {
  position: absolute;
  margin: 0;
  left: 0;
  transform: translateX(10000px);
  transition: transform 5s ease-in-out;
}

Html

<div class="contrainer">
  <div>
    <input type='button' value="test"></input>
  </div>

  <div class="row">
    <div class="answer">
      <span class="answer-text-2">To disappear</span>
    </div>
    <div class="answer-hide">To move sideway

    </div>
  </div>

</div>

Answer 1

嗯...你的 div 的 answer-hide 的宽度设置为 auto，它的 position 设置为 static（如默认值）。应用转换时，div 的 position 会自动更改为 absolute（如规范中所定义），对于绝对定位的块元素，width:auto 类似于 shrink适合。要解决这个问题，请确保您的 width 属性设置正确，因为 width: 100%; 不等于 width: '100%'; :)

.answer-hide {
   border: 1px solid blue;
   width: 100%;
}

Answer 2

一开始你用

width: '100%';

这不是一个有效值，因为 width 需要一个长度，而不是一个字符串。所以忽略了。

因此，它有初始的width: auto。对于 block-level, non-replaced elements in normal flow，这是包含块的宽度（减去边距、填充和边框）。

然后，你使用

position: absolute;

为 absolutely positioned, non-replaced elements, when width and right are auto, and left is not, the width is given by the shrink-to-fit algorithm (also called fit-content).

这就是它缩小的原因。

为什么 transform:translatex 在这个 css class 中没有把 div 移到一边？

Why transform:translatex in this css class does not move the div sideway?

css

css-transitions

css-transforms