我正在尝试在属性上animate使用 CSS 的页面元素。淡出可以正常工作，但淡入则不行。我究竟做错了什么？transitionopacity
有些事实确实很奇怪：
.no-display类，一切都会按预期工作（但我应该使用它）。代码：
超文本标记语言
<p><a href="javascript:fadeIn()">Fade in</a></p>
<p><a href="javascript:fadeOut()">Fade out</a></p>
<div class="no-display invisible" id="square"></div>
CSS
.no-display {
display: none;
}
.invisible {
opacity: 0;
}
#square {
width: 500px;
height: 500px;
background-color: red;
border: 1px solid black;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
transition: opacity 2s ease;
}
JavaScript
function fadeIn() {
square.classList.remove("no-display");
square.classList.remove("invisible");
}
function fadeOut() {
square.classList.add("invisible");
setTimeout(function() { square.classList.add("no-display"); }, 2000 );
}
或者： http: //jsfiddle.net/V2Sar/6/。
注意，我不能使用任何框架，例如 jQuery。我必须只使用纯 JavaScript。
使用 JS 触发 CSS 转换的简单方法是切换类名，而最简单的方法是通过classList API。
var square = document.getElementById("square");
function fadeIn() {
square.classList.remove("invisible");
}
function fadeOut() {
square.classList.add("invisible");
}
#square {
opacity: 1;
transition: opacity 2s ease;
}
#square.invisible {
opacity: 0;
}
另外，请确保您的脚本位于 的末尾，<body>这样您就不必担心 DOM 是否已构建（jsfiddle 中的单独选项）。
浏览器支持不是很好（IE9 不支持），但是https://github.com/eligrey/classList.js上有一个垫片可用
如果这对您来说还不够好，请告诉我，我也会发布一些替代方案。