Question

我正在animate属性上使用CSS transition尝试opacity页面元素。淡出效果正常，但淡入淡出则不然。我做错了什么？

有些事实很奇怪：

不使用.no-display类，一切都按预期工作（但我应该使用它）。
在浏览器控制台中重播功能的命令按预期工作（但功能没有）。

代码：

HTML 的

<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。

Answer 1

使用JS触发CSS过渡的简单方法是切换类名，简单的方法是通过classList API。

JS

var square = document.getElementById("square");
function fadeIn() {
    square.classList.remove("invisible");
}

function fadeOut() { 
    square.classList.add("invisible");
}

CSS

#square {
    opacity: 1;
    transition: opacity 2s ease;
}
#square.invisible {
    opacity: 0;
}

http://jsfiddle.net/V2Sar/5/

另外，请确保您的脚本位于<body>的末尾，这样您就不必担心DOM是否已构建（jsfiddle中的单独选项）。

浏览器支持不是很好（在IE9中不支持）但https://github.com/eligrey/classList.js

有一个垫片

如果这对你来说不够好，请告诉我，我也会发布一些替代方案。

Answer 2

唯一的问题是“显示：无；”。只需将其替换为“可见性：隐藏”。

原因是'display：none'不会在DOM中生成结果元素。因此，它不能淡入不存在的东西。创建后，其以可见方式创建。

“可见性：隐藏”，但是确实在DOM中生成结果元素，只是不显示它。因为它存在，所以可以在需要时淡入。

通过CSS转换淡入效果不正常

2 个答案:

JS

CSS