javascript - 取消设置元素可见性、更改 innerHTML 并转换回

Question

我的 HTML 页面上有一个元素，我想提供动态内容，并且我希望插入的 HTML 从 0% 过渡到 100% 不透明度。

HTML

<div id="content"></div>

CSS

#content {
  opacity: 1;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
}

#content.hide {
  opacity: 0;
}

JavaScript

function setContent(html) {
  var content = document.getElementById("content");

  //Set hide class
  content.className += " hide";

  //Set HTML
  content.innerHTML = html;

  //Unset hide class
  content.className = content.className.replace(/(?:^|\s)hide(?!\S)/g, '');
}

请注意，setContent()设置然后取消设置hide类。但是，似乎浏览器（至少 Chrome）直到从函数返回后才使内容元素无效，因此该元素没有机会转换。如何确保动画播放？

编辑：要清楚，在 DOM 加载后setContent()调用。想象一个应用程序在发生某些操作时清除并重新填充屏幕。

Answer 1

使用动画怎么样？

#content {
    padding-left: 32px;
    padding-right: 32px;
    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; 
    -webkit-animation: fadein 0.5s; 
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

Answer 2

你能更清楚地知道这是什么背景吗？

另外，您在哪里调用该函数？您在 DOM 就绪函数中调用函数的地方是什么？

在 jQuery 中，它会是这样的：

$(document).ready(function(){
    //call the function inside here.
});