所以我找到了这个解决方案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

相关问题