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)在从函数返回之前不会使内容元素无效，因此该元素没有机会进行转换。如何确保动画播放？

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

Answer 1

你能更清楚地说明这是什么情况吗？

还有你在哪里调用这个函数？您在 DOM 就绪函数中调用函数的地方是什么？

在 jQuery 中它会是这样的:

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