Question

我想要更改多个标签。我的功能工作正常，但我不能正确地设置动画的不透明度，显示器似乎总是覆盖它，只是立即显示。我已经将不透明度和显示分成了我添加的单独类，并且还使用了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>

JS：

var off = false;
function addAnimateListener() {
    var links = document.getElementsByClassName('headerNav');
    for(var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function() {onclick(event.target);});
    }
}

function onclick(target) {
    document.querySelector('.header').classList.add('header-transition');
    var tabs = ['about', 'projects', 'contact'];
    for(var i in tabs) {
        document.getElementById(tabs[i]).classList.remove('content-show-op');
        document.getElementById(tabs[i]).classList.remove('content-show-dis');
    }
    var t = document.getElementById(target.innerHTML);
    if(off == false) {
        t.classList.add('content-show-dis');
        t.classList.add('content-show-op');
    } else {
        t.classList.toggle('content-show-op');
        setTimeout(function() {
            t.classList.toggle('content-show-dis');
        }, 1500);
    }
}

CSS：

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

.content-show-op {
    opacity: 1;
}

.content-show-dis {
    display: block;
}

注意：我不想使用jQuery，只是普通的JS。

Answer 1

将动画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;
}

<强> JS

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");
}

JSFiddle Demo

使用display：block时无法获得动画的不透明度

1 个答案: