所以我找到了這個解決方案Using CSS for fade-in effect on page load我用方法2和原始JavaScript。這裏是我的代碼示例淡入淡出不起作用

的JavaScript

var fadeOnLoad = function() { 
    document.getElementById("wrapper").className += "load"; 
}; 
fadeOnLoad();

CSS

#wrapper { 
    opacity: 0; 
    transition: opacity 2s ease-in; 
} 

.load { 
    opacity: 1; 
}

鏈接到的網站，這是行不通的https://skidle.github.io/projects/weather

而這個文本在劃掉Google開發工具

來源

2017-02-09 Daria Doronina

'不透明度：1重要;'？ ID選擇器比類 – Banzay

嘗試定義

opacity: 1 !important;

id選擇具有比類

這裏是清晰的過程邏輯片段更高的優先級。元素在被加載之前是不可見的。只要身體活動的onload解僱，元素獲得opacity: 1;

function fadeOnLoad() { 
 
    document.getElementById("wrapper").className = ""; 
 
};

#wrapper { 
 
    transition: opacity 2s ease-in; 
 
} 
 

 
.not_loaded { 
 
    opacity: 0; 
 
}

<body onload="fadeOnLoad()"> 
 
<div id="wrapper" class="not_loaded">text</div> 
 
</body>

來源

2017-02-09 12:46:12 Banzay

更高的優先級或改進您的選擇器：'＃wrapper.load {opacity：1;}' – scraaappy

添加重要的類屬性。

.load{ 
     opcacity: 1 !important; //because you have id selector with opacity to 0. 
     }

來源

2017-02-09 12:41:59

作爲一個很好的做法，儘量避免使用標識爲造型。

而不是定義在#wrapper選擇器的過渡的，創建一個類含有像這樣的transition屬性：

.opacity-transition { 
    transition: opacity 2s ease-in; 
}

一旦過渡結束，這個類不會被任何更需要，並且可以是除去。

創建另一個類來初始隱藏#wrapper元素。當這個類被刪除時，它會觸發轉換。

.hidden { 
    opacity: 0; 
}

代碼段：

function fadeOnLoad() { 
 
    //Cache the selector. 
 
    var wrapper = document.getElementById("wrapper"); 
 
    console.log(wrapper.className); 
 
    //Add event listener for transition end. 
 
    wrapper.addEventListener("transitionend", function() { 
 
    //Remove the class which is not needed anymore. 
 
    this.classList.remove("opacity-transition"); 
 
    console.log(this.className); 
 
    }); 
 
    //Remove hidden class to start the transition. 
 
    wrapper.classList.remove("hidden"); 
 

 
};

.opacity-transition { 
 
    transition: opacity 2s ease-in; 
 
} 
 
.hidden { 
 
    opacity: 0; 
 
}

<body onload="fadeOnLoad()"> 
 
    <div id="wrapper" class="opacity-transition hidden"> 
 
    text</div> 
 
</body>

JSFIDDLE

來源

2017-02-09 14:07:21 Ricky

淡入淡出不起作用

回答

JSFIDDLE

相關問題