位置轉換在邊緣不起作用

所以我有一個元素的動畫，它改變了背景顏色，並且改變了從父母的垂直中心到底部的底部位置。位置轉換在邊緣不起作用

我只是在邊緣做了一個測試，並且背景工作正常，但底部過渡不是。它只是瞬間改變。

我確實意識到翻譯可能會起作用，但是我有興趣知道在頂部，右側，底部，左側的位置是否與Microsoft瀏覽器中的過渡無關？它在Firefox，Chrome和Safari中運行得非常好。

我的CSS如下所示。

.heading-bg{ 
    display: table; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    bottom: calc(50% - 30px); 

    -webkit-transition: bottom .5s ease-out, background-color .4s ease-out; 
    -moz-transition: bottom .5s ease-out, background-color .4s ease-out; 
    -ms-transition: bottom .5s ease-out, background-color .4s ease-out; 
    -o-transition: bottom .5s ease-out, background-color .4s ease-out; 
    transition: bottom .5s ease-out, background-color .4s ease-out; 
} 

.gallery-item:hover .heading-bg{ 
    bottom: 0px; 
    background-color: rgba(0,0,0,0.7); 

    -webkit-transition: bottom .6s ease-out, background-color .4s ease-out; 
    -moz-transition: bottom .6s ease-out, background-color .4s ease-out; 
    -ms-transition: bottom .6s ease-out, background-color .4s ease-out; 
    -o-transition: bottom .6s ease-out, background-color .4s ease-out; 
    transition: bottom .6s ease-out, background-color .4s ease-out; 
}

標記：

<div class="gallery-item"> 
    <a href="www.example.com"> 
     <div class="gallery-item-inner"> 
      <div class="heading-bg"> 
       <h3>Gallery name</h3> 
      </div> 
     </div> 
    </a> 
</div>

名爲.gallery項目有一個固定的高度

來源

2016-12-13 Emil Østervig

你可以發佈HTML嗎？ – user3187960

已更新。問題不在於.heading-bg元素沒有得到它的底部：0px位置。問題是，轉換不適用於邊緣或在Edge中模擬的以前的IE版本。所以底部位置的變化立即發生，而不是.6秒。 –

如果將'parent：hover'更改爲實際的類，例如'.gallery-item：hover'，它將起作用......在css中沒有像'parent'這樣的東西 – LGSon

我有同樣的問題，並設法通過比較我們的代碼找出什麼是錯的。

這裏的一部分邊緣不喜歡：

bottom: calc(50% - 30px);

看來，目前的邊緣（EdgeHTML v14.14393）結合鈣使用時不支持轉換（）。

來源

2017-04-03 11:27:14 shakyjake

我要說一句你的話。我改變了整個動畫，並且該項目已經生效。但我會牢記這一點以備將來參考。謝謝！。 –

所以我之前身上有一種類似的問題。有可能Edge不支持動畫background-color（它不適合我background-image）

我會建議使用@keyframe這是我如何解決我的問題。

此外，您不需要爲-q transition屬性使用-moz-，-o-和-ms-前綴。所以你可以刪除這些。 http://shouldiprefix.com/#transitions。

我會將我的問題與答案聯繫起來，在我的問題上也許會有所幫助。 CSS3 pulse animation not working in IE and FF

來源

2016-12-14 08:59:14

謝謝，我會在稍後閱讀。在我的情況下，背景色似乎對動畫效果不錯。可以嘗試與關鍵幀相反。 –

位置轉換在邊緣不起作用

回答

相關問題