Javascript Can'；使用“显示：块”时，无法获取要设置动画的不透明度

我有多个要更改的选项卡。我的功能运行良好，但我不能得到不透明度动画正常，显示似乎总是覆盖它，只是立即显示。我已经将不透明度和显示分离为单独的类，我添加了这些类，并使用setTimeout允许在显示触发之前不透明度淡出

HTML:

<article id='about' class='content-hide'>
        <section>
            ABOUT - Lorem ipsum dolor
        </section>
    </article>

    <article id='projects' class='content-hide'>
        <section>
            PROJECTS - Lorem ipsum dolor
        </section>
    </article>

    <article id='contact' class='content-hide'>
        <section>
            CONTACT - Lorem ipsum dolor
        </section>
    </article>

---

注意：我不想使用jQuery，只想使用纯JS。

将动画css放入一个单独的类中，然后设置显示块，然后将动画类添加到元素中

CSS

.content-hide {
    height: 20%;
    display:none;
    overflow: auto;
    margin-top: 420px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    opacity:0;
}
.content-show {
    display:block;
}
.content-ani {
    transition: opacity 1.5s ease;
    -webkit-transition: opacity 1.5s ease;
    opacity: 1.0;
}

function show(id){
    var articles = document.querySelectorAll("article");
    for(var i=0; i<articles.length; i++){
        articles[i].classList.remove("content-ani");
        articles[i].classList.remove("content-show");
    }
    var ele = document.getElementById(id);
    ele.classList.add("content-show");

   //Needed to let the browser set the display before starting the animation
    setTimeout(function(){
        animate(id);
    },1);
    return false;
}

function animate(id){
  var ele = document.getElementById(id);
  ele.classList.add("content-ani");
}

JS

.content-hide {
    height: 20%;
    display:none;
    overflow: auto;
    margin-top: 420px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    opacity:0;
}
.content-show {
    display:block;
}
.content-ani {
    transition: opacity 1.5s ease;
    -webkit-transition: opacity 1.5s ease;
    opacity: 1.0;
}

function show(id){
    var articles = document.querySelectorAll("article");
    for(var i=0; i<articles.length; i++){
        articles[i].classList.remove("content-ani");
        articles[i].classList.remove("content-show");
    }
    var ele = document.getElementById(id);
    ele.classList.add("content-show");

   //Needed to let the browser set the display before starting the animation
    setTimeout(function(){
        animate(id);
    },1);
    return false;
}

function animate(id){
  var ele = document.getElementById(id);
  ele.classList.add("content-ani");
}

功能显示（id）{
var articles=document.querySelectorAll（“article”）；
对于（var i=0；i
您不需要选择两次选项卡，只需使用chaining document.getElementById（tabs[i]）.classList.remove（'content-show-op'）。remove（'content-show-dis'））；为什么要混合使用css转换和JavaScript？使用css可以完成所有显示和显示，而且比JavaScript快得多。唯一的缺点是传统浏览器不支持css3转换。有关兼容性，请访问www.caniuse.com。