技術標籤：前端cssjshtmlhtml5

解決前端css3使用transition重新整理頁面取消過渡顯示

今天在使用transition時遇到一個問題，重新整理頁面後不會直接顯示樣式，而是會顯示初始效果過渡到樣式效果的動態效果，

查了很多資料，找到了大佬的解決辦法，在這裡存個檔！

這主要是由於link引入css時的加在順序問題導致的，有兩種解決方案

第一種

要麼將css樣式與html程式碼放在同一個檔案裡面

第二種

使用link引入的方法時，先將body新增demo子類，將自己程式碼包裹

然後為這個子類新增css

.demo {
    -webkit-transition: none!important;
    -moz-transition: none!important;
    -ms-transition: none!important;
    -o-transition: none!important;
    transition: none!important;
}
 

最後在html頁面加一段載入完成後去掉demo類的指令碼

    <script>
        $(window).on('load', function() {
            $("body").removeClass("demo");
        });
    </script>

查詢到的資料給大家一個入口

transition頁面載入觸發問題解決方案

【前端】解決 CSS 的 transition 在頁面載入時就播放過渡動畫的問題

完成