如何在MS Edge中的僞元素上進行CSS轉換後運行一些javascript？

我在處理Microsoft Edge中的「transitionend」事件時遇到問題，在僞元素上。如何在MS Edge中的僞元素上進行CSS轉換後運行一些javascript？

它適用於其他瀏覽器，如chrome，safari和firefox。我認爲這可能是MS Edge的一個錯誤，但它在IE11中也不起作用，所以也許在微軟的世界中我錯過了其他方式。

有沒有人知道如何處理這在IE瀏覽器？

這是代碼...如果正確處理了transitionend事件，那麼在淡入完成後，該框將變爲綠色。

window.setTimeout(function(){ 
 
    
 
    $('#box').one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd',function(){ 
 
    $(this).addClass('done'); 
 
    }); 
 
    
 
    $('#box').addClass('show'); 
 
    
 
},1);

#box { 
 
    position: relative; 
 
} 
 
#box:before { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: tomato; 
 
    transition: opacity 1s; 
 
    opacity: 0; 
 
    content: ""; 
 
} 
 
#box.show:before { 
 
    opacity: 1; 
 
} 
 
#box.done:before { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div id="box"></div>

來源

2015-12-17 JeremyTM

是你使用jQuery的.animate（）函數，你可以把在年底的功能來運行，這樣的：

$(document).ready(function() { 
    $('#box').animate({opacity: 1}, 1000, function() { 
    $('#box').animate({background-color: green}, 1000); 
    }); 
});

背景顏色只有在完成淡入後纔會轉換爲綠色。希望這有助於！

來源

2015-12-17 07:03:14

謝謝，但這不適用於動畫僞元素上的屬性，如：before。我在我的真實項目中使用了僞元素，以便我可以使用底下的默認圖像淡化背景圖像，並在頂部使用淡色/漸變。 – JeremyTM

#box { 
    position: relative; 
} 
#box > .before { 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    background-color: tomato; 
    transition: opacity 1s; 
    opacity: 0; 
    content: ""; 
} 
#box.show > .before { 
    opacity: 1; 
} 
#box.done > .before { 
    background-color: green; 
}

IE11在僞元素上的transitionend存在問題。如果在父容器內添加額外的元素。這對我有用！

來源

2016-08-01 20:46:39

如何在MS Edge中的僞元素上進行CSS轉換後運行一些javascript？

回答

相關問題