爲什麼變換：在這個CSS類中的translatex不會移動div側身？

我想在屏幕上移動div。 div最初設置爲width:100%。但是當轉換開始時，div的大小似乎已經縮小（藍色邊框只是圍繞文本）。爲什麼是這種情況？爲什麼變換：在這個CSS類中的translatex不會移動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>

來源

2016-02-08 Anthony Kong

嗯......你一個div的寬度稱爲answer-hide設置爲auto，它的position設置爲static（與默認值一樣）。當應用轉換div的position自動更改爲absolute（定義在規範）和width:auto爲塊元素絕對定位是像收縮到適合。爲了解決這個問題，可以肯定的，那你的width屬性設置正確，因爲width: 100%;不等於width: '100%'; :)

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

來源

2016-02-08 23:08:58

一旦你指出，它是如此明顯:-)有一個upvote！ –

在開始的時候，你用

width: '100%';

這不是一個有效的值，因爲width需要一個長度，而不是一個字符串。所以它被忽略了。

因此，它具有初始width: auto。對於block-level, non-replaced elements in normal flow，這是包含塊的寬度（減去邊距，填充和邊框）。

然後，使用

position: absolute;

對於absolutely positioned, non-replaced elements，當width和right是auto和left沒有，寬度由shrink-to-fit算法（也稱爲fit-content）給出。

這就是它縮小的原因。

來源

2016-02-08 23:11:13 Oriol

爲什麼變換：在這個CSS類中的translatex不會移動div側身？

回答

相關問題