javascript - 淡入和淡出 block 中的文本

Question

我有一个内容被脚本动态更改的 block ，我希望该内容不会立即更改，而是淡出然后淡入新内容。我希望在没有 jQuery 的情况下完成——纯 JS 和 CSS。我试图以这种方式做到这一点:我已经在 CSS 中定义了透明和不透明类，并将过渡设置为 2s，并且想在内容更改时切换这些类以使用内容 block 。正如我所期望的那样，它应该会平滑地淡出旧内容并淡入新内容。但实际上内容只是瞬间改变。CSS:

.non-opacle {
    opacity:0;
    transition: opacity 2s linear;
}
.opacle {
    opacity:1;
    transition: opacity 2s linear;
}

HTML

       <div class="alert alert-info" id="wrapper">
            <p id="text-box">…</p>
        </div>

JS

var textBox = document.getElementById('text-box');
window.onload = function () {
    var failCounter = 0;
    var current = notes[Math.floor(Math.random() * 12)];
    textBox.className = 'opacle';
    textBox.innerHTML = '…';
    function keyClicked(event) {
        if (event.target.className.split(' ')[1] === current) {
            textBox.className = 'non-opacle';
            textBox.innerHTML = '*some altered content*';
            textBox.className = 'opacle';
    …

在 JS 中，我最初将内容包装 block 设置为具有初始内容的“opacle”类，然后在某些情况下，我将其设置为“非 opacle”，更改 block 的 innerHTML 以放置相关内容，并将类设置回'乳白色'。但是没有动画出现(我做错了什么？

Answer 1

您的问题是您在初始转换有时间完成之前同时添加和删除 opacity。

您需要做的是延迟 innerHTML 的更改和 opacity 的重置，直到转换完成。

这里有一个非常简单的循环例子来说明原理，需要注意的重要部分是setTimeout。

var p=document.getElementById("change"),text=["One","Two","Three","Four","Five"],x=0,interval=setInterval(function(){
    x++;if(x===text.length)x=0;
    p.classList.add("hide");
    setTimeout(function(){
        p.innerHTML=text[x];
        p.classList.remove("hide");
    },500);
},2000);

#change{
    color:#000;
    font-family:arial;
    padding:5px;
    transition:opacity .5s linear;
}
.hide{
    opacity:0;
}

<p id="change">One</p>