取消设置元素可见性，更改 innerHTML，然后转换回来

Unset element visibility, change innerHTML, and transisition back

本文关键字：然后 转换 回来 innerHTML 更改 元素 可见性 取消 设置      更新时间：2023-09-26

我的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后调用的。想象一下，当发生某些操作时，一个应用程序会清除并重新填充屏幕。

你能更清楚地说明一下这个背景是什么吗？

另外，您在哪里调用该函数？你在 DOM 就绪函数中调用函数的位置吗？

在jQuery中，它将是这样的： 

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

使用动画怎么样？

#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;
    }
}
相关文章：