Anthony Kong February 2016

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

I want to move a div across a screen. The div is set to width:100% initially. But when the transformation starts, the size of the div seems to have shrinked (the blue border just wraps around the text). Why it is the case?

Before

enter image description here

After

enter image description here

Here is my code example

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

Answers


Maciej Kwas February 2016

Well... Your width of a div called answer-hide is set to auto, and it's position is set to static (as for default values). When applying transformation div's position is automatically changed to absolute (as defined in spec) and width:auto for block elements positioned absolutely is something like shrink to fit. To fix that, be sure, that your width property is properly set, because width: 100%; is not equal to width: '100%'; :)

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


Oriol February 2016

At the beginning, you use

width: '100%';

This is not a valid value, because width expects a length, not a string. So it's ignored.

Therefore, it has the initial width: auto. For block-level, non-replaced elements in normal flow this is the width of the containing block (subtracting margins, paddings and borders).

Then, you use

position: absolute;

For 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).

That's why it shrinks.

Post Status

Asked in February 2016
Viewed 2,703 times
Voted 12
Answered 2 times

Search




Leave an answer