通过CSS转换淡出;工作不正常

Fading in via CSS transition doesn't work properly

本文关键字：工作 不正常 淡出 CSS 转换 通过      更新时间：2023-09-26

我正在尝试使用opacity属性上的CSS transition来animate页面元素。淡出可以正常工作，但淡入不行。我做错了什么？

有些事实真的很奇怪：

  • 在不使用.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。

用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

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

唯一的问题是"display:none；"。只需将其替换为"可见性：隐藏"。

原因是"display:none"没有在DOM中构建结果元素。因此，它不能在不存在的东西中消失。当它被创建时，它以可见的方式被创建。

然而，"visibility:hidden"确实在DOM中构建了结果元素，只是不显示它。因为它存在，所以它可以在需要时淡入。

相关文章：