Зачем преобразовать: translatex в этом классе css не перемещает div в сторону?

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

Ну ... Ваша ширина DIV называется answer-hide установлено в auto, а для него position установлено значение static (как для значений по умолчанию). При применении преобразования div position автоматически изменяется на absolute (как определено в спецификации) и width:auto для элементов блока, расположенных абсолютно что-то вроде сжимается до. Чтобы исправить это, убедитесь, что ваше имущество 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 это ширина содержащего блока (вычитание полей, paddings и границ).

Затем вы используете

position: absolute; 

Для absolutely positioned, non-replaced elements, когда width и right являются auto и left нет, ширина задается shrink-to-fit алгоритма (также называемый fit-content).

Именно поэтому он сжимается.