css - 为什么要转换:translatex in this css class does not move the div sideway?

Question

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

之前

之后

这是我的代码示例

http://codepen.io/kongakong/pen/MKzmMm

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

好吧...您将名为 answer-hide 的 div 的宽度设置为 auto，并将其 position 设置为 static(至于默认值)。应用转换时，div 的 position 会自动更改为 absolute(如规范中所定义)，对于绝对定位的 block 元素，width:auto 类似于 < em>缩小以适应。要解决此问题，请确保您的 width 属性设置正确，因为 width: 100%; 不等于 width: '100%'; :)

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