使用display時無法獲得不透明度的動畫：block

我有多個要更改的選項卡。我有功能正常工作，但我不能得到不透明的正確動畫，顯示似乎總是覆蓋它，並立即顯示。我已經分離的不透明度和顯示成單獨的類，我添加，還可以使用一個setTimeout的，讓不透明度爲顯示閃光之前淡出使用display時無法獲得不透明度的動畫：block

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。

來源

2014-01-26 user3105607

您不需要兩次選擇標籤，只需使用鏈接document.getElementById（tabs [i]）。classList.remove（'content-show-op'）。remove（'content-show-dis'）; – otherDewi

你爲什麼要混合CSS轉換和JavaScript？它可能做所有的演出，並揭示使用CSS，它比JavaScript快得多。唯一的缺點是傳統瀏覽器不支持css3轉換。檢查www.caniuse.com是否兼容。 – otherDewi

[呃，你的代碼沒有顯示任何東西給我們排查]（http://jsfiddle.net/SinisterSystems/Cr8FQ/） –

把你的動畫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"); 
}

JSFiddle Demo

來源

2014-01-26 19:02:22

多數民衆贊成在此非常感謝 – user3105607

使用display時無法獲得不透明度的動畫：block

回答

相關問題