CSS轉換在谷歌瀏覽器中不起作用

如果我更改了顯示屬性，則在谷歌瀏覽器（版本50）中轉換將不起作用（它立即發生），但它在Firefox（版本44）和IE（版本11））。CSS轉換在谷歌瀏覽器中不起作用

HTML

<div class="outer"> 
    <div class="inner"> 
    </div> 
</div>

CSS

.inner { 
    width: 100px; 
    height: 100px; 
    background: red; 
    transition: width 2s linear 1s; 
    display: inline-block; 
} 
.outer:hover .inner { 
    width: 300px; 
} 
.outer:hover { 
    display: inline-block; /* If I comment this, it will work */ 
}

你可以看到一個演示here。

來源

2016-04-22 Ashkan

使用display: block;而不是display: inline-block;

.inner { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    display: block; 
 
} 
 
.outer:hover .inner { 
 
    width: 300px; 
 
    -webkit-transition: width 2s linear; 
 
    -moz-transition: width 2s linear; 
 
    -o-transition: width 2s linear; 
 
    transition: width 2s linear; 
 
} 
 
.outer:hover { 
 
    display: block; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    </div> 
 
</div>

來源

2016-04-22 14:04:04 DININDU

它就像註釋行，'顯示：塊;'是默認對於'div'元素，我想改變它。 – Ashkan

如果你添加'.outer {display：inline-block）'（注意缺少'：hover'僞選擇器），它也可以解決它。是否有一個特定的原因，你只是在盤旋時將'display'屬性改爲'inline-block'？ – Frits

@fritzypop，我試圖滾動文字，如[this]（https://jsfiddle.net/amyseqmedia/2gKZF/）。但是對於'left'屬性使用固定數字。更改'display'應該允許元素的父元素自動增長到子元素的長度，然後如果可以使用'left'屬性的百分比。無論如何，我解決了它使用關鍵幀，從[這裏]（http://stackoverflow.com/questions/3331353/transitions-on-the-display-property）的想法，我的滾動解決方案是[這裏]（https：/ /jsfiddle.net/Ashkan_/2q982juo/），對任何感興趣的人。 – Ashkan

左邊添加：0的基本定義，你會被罰款

來源

2016-04-22 14:11:31 Malhar

這是行不通的，我試過'left：0'到處都沒有'position：relative;' – Ashkan

ok請檢查這個demo https://jsfiddle.net/9m0tfvqz/6/ – Malhar

謝謝，但不幸的是它有一個錯字導致'display：inline-block;'無效，因此'display'仍然是'block'。您在'left'而不是';'之後鍵入''，'' – Ashkan

CSS轉換在谷歌瀏覽器中不起作用

回答

相關問題