4

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

有些事实真的很奇怪：

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

4

2 回答 2

2

使用 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有一个 shim

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

于 2013-06-28T09:17:36.000 回答
0

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

原因是 'display: none' 不会在 DOM 中构建结果元素。因此，它不能淡化不存在的东西。当它被创建时，它以可见的方式创建。

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

于 2019-06-03T16:56:17.537 回答