Animate display：none to display：inline

Question

我正在嘗試製作一個網頁，其中包含兩組不同的文本（文本A和文本B），它們的長度不同，並且不以A/B的順序排列（即存在文本B之前和之後的文本A）。

頂部有三個按鈕：Show All,Text A和Text B。

當點擊Show All，所有的文本顯示，當點擊Text A，只有文本的文本顯示和化文本B文本隱藏等

我想動畫文字的變化（淡入動畫）。
有沒有一個簡單的方法來做到這一點？

function select(name) { 
 
    var navbar = document.getElementById("navbar"); 
 
    var elems = navbar.getElementsByTagName("li"); 
 

 
    var classes = []; 
 

 
    for (x = 0; x < elems.length; x++) { 
 
    var obj = elems[x].getElementsByTagName("a")[0]; 
 
    obj.className = elems[x].id !== name ? "nav" : "navsel"; 
 
    classes[x] = elems[x].id; 
 
    } 
 

 
    for (n = 0; n < classes.length; n++) { 
 
    var allelems = document.getElementsByClassName(classes[n]); 
 
    for (x = 0; x < allelems.length; x++) { 
 
     var s = allelems[x].className; 
 
     if (s.search(name) >= 0 || name === "all") { 
 
     s = s.replace(" hide", ""); 
 
     } else if (s.search("hide") < 0) { 
 
     s += " hide"; 
 
     } 
 
     allelems[x].className = s; 
 
    } 
 
    } 
 
}

ul.nav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    background: #ffffff; 
 
    width: 100%; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
li.nav { 
 
    float: left; 
 
    width: 33.3333%; 
 
    height: 100%; 
 
    display: table; 
 
} 
 
a.nav, 
 
a:visited.nav { 
 
    display: table-cell; 
 
    font-weight: bold; 
 
    color: #ffffff; 
 
    background-color: #800000; 
 
    padding: 4px; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
} 
 
a.navsel, 
 
a:visited.navsel { 
 
    display: table-cell; 
 
    font-weight: bold; 
 
    color: #ffffff; 
 
    background-color: #C00000; 
 
    padding: 4px; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
} 
 
a:hover.nav, 
 
a:active.nav { 
 
    background-color: #A00000; 
 
    color: #ffffff; 
 
} 
 
a:hover.navsel, 
 
a:active.navsel { 
 
    color: #ffffff; 
 
} 
 
.hide { 
 
    display: none; 
 
}

<ul class="nav" id="navbar"> 
 
    <li class="nav" id="all"> 
 
    <a class="navsel" onclick="select('all');">Show All</a> 
 
    </li> 
 
    <li class="nav" id="texta"> 
 
    <a class="nav" onclick="select('texta');">Text A</a> 
 
    </li> 
 
    <li class="nav" id="textb"> 
 
    <a class="nav" onclick="select('textb');">Text B</a> 
 
    </li> 
 
</ul> 
 
<br /> 
 
<br /> 
 
<h1>Test</h1> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
<h2 class="texta">Text A</h2> 
 
<p class="texta">We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, 
 
    do ordain and establish this Constitution for the United States of America.</p> 
 
<h2 class="textb">Text B</h2> 
 
<p class="textb"> 
 
    We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. 
 
    <br />That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, 
 
    <br />That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to 
 
    them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more 
 
    disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under 
 
    absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security. 
 
    <br />Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, 
 
    all having in direct object the establishment of an absolute Tyranny over these States. 
 
</p> 
 
<h1>More Text</h1> 
 
<h2 class="texta">Text A</h2> 
 
<p class="texta">Don't cry because it's over, smile because it happened.</p> 
 
<h2 class="textb">Text B</h2> 
 
<p class="textb">Live as if you were to die tomorrow. Learn as if you were to live forever.</p>

Answer 1

這是一個簡單的解決方案，不需要任何圖書館如Jquery。

使用setTimeout我們只能在元素淡出後給元素一個display:none的樣式。

<html> 
 
    <head> 
 
     <title>MCVE</title> 
 
     <style type="text/css"> 
 
      ul.nav { 
 
       list-style-type:none; 
 
       margin:0; 
 
       padding:0; 
 
       position:fixed; 
 
       top:0px; 
 
       left:0px; 
 
       background:#ffffff; 
 
       width:100%; 
 
       height:30px; 
 
       text-align:center; 
 
       vertical-align:middle; 
 
      } 
 
      li.nav { 
 
       float:left; 
 
       width:33.3333%; 
 
       height:100%; 
 
       display:table; 
 
       cursor:pointer; 
 
      } 
 
      a.nav, a:visited.nav { 
 
       display:table-cell; 
 
       font-weight:bold; 
 
       color:#ffffff; 
 
       background-color:#800000; 
 
       padding:4px; 
 
       text-decoration:none; 
 
       vertical-align:middle; 
 
      } 
 
      a.navsel, a:visited.navsel { 
 
       display:table-cell; 
 
       font-weight:bold; 
 
       color:#ffffff; 
 
       background-color:#C00000; 
 
       padding:4px; 
 
       text-decoration:none; 
 
       vertical-align:middle; 
 
      } 
 
      a:hover.nav, a:active.nav { 
 
       background-color:#A00000; 
 
       color:#ffffff; 
 
      } 
 
      a:hover.navsel, a:active.navsel { 
 
       color:#ffffff; 
 
      } 
 

 
      .hide { 
 
       opacity:0; 
 
      } 
 
      
 
      .noDisplay{ 
 
       display:none; 
 
      } 
 
      
 
      p, h2{ 
 
       transition: 
 
       opacity 1s ease 
 
      } 
 
      
 
      .show{ 
 
       animation-name: fadeIn; 
 
       animation-duration: 2s; 
 
       animation-fill-mode: forwards; 
 
      } 
 

 

 
      @keyframes fadeIn { 
 
       0% { 
 
       opacity:0; 
 
        } 
 
       100% { 
 
        opacity:1; 
 
        } 
 
      } 
 
     </style> 
 
     <script> 
 
      function select(element){ 
 
       if(element.parentElement.id == 'texta'){ 
 
       document.getElementById('all').childNodes[ 1 ].classList.remove('navsel'); 
 
       document.getElementById('all').childNodes[ 1 ].classList.add('nav'); 
 
       
 
       document.getElementById('textb').childNodes[ 1 ].classList.remove('navsel'); 
 
       document.getElementById('textb').childNodes[ 1 ].classList.add('nav'); 
 
       
 
       document.getElementById('texta').childNodes[ 1 ].classList.add('navsel'); 
 
         
 
       element.classList.add('navsel'); 
 
       var everyElement = document.getElementsByClassName('textb'); 
 
       for(var i = 0; i < everyElement.length; i++){ 
 
        everyElement[ i ].classList.add('hide'); 
 
       } 
 
       removeElement = setTimeout(removeNowA, 900);  
 
       } 
 
       else if(element.parentElement.id == 'textb'){ 
 
       document.getElementById('all').childNodes[ 1 ].classList.remove('navsel'); 
 
       document.getElementById('all').childNodes[ 1 ].classList.add('nav'); 
 
       
 
       document.getElementById('texta').childNodes[ 1 ].classList.remove('navsel'); 
 
       document.getElementById('texta').childNodes[ 1 ].classList.add('nav'); 
 
       
 
       document.getElementById('textb').childNodes[ 1 ].classList.add('navsel'); 
 
       
 
       var everyElement = document.getElementsByClassName('texta'); 
 
       for(var i = 0; i < everyElement.length; i++){ 
 
        everyElement[ i ].classList.add('hide'); 
 
       } 
 
       removeElement = setTimeout(removeNowB, 900);  
 
       } 
 
       else if(element.parentElement.id == 'all'){ 
 
       document.getElementById('texta').childNodes[ 1 ].classList.remove('navsel'); 
 
       document.getElementById('texta').childNodes[ 1 ].classList.add('nav'); 
 
       
 
       document.getElementById('textb').childNodes[ 1 ].classList.remove('navsel'); 
 
       document.getElementById('textb').childNodes[ 1 ].classList.add('nav'); 
 
       
 
       document.getElementById('all').childNodes[ 1 ].classList.add('navsel'); 
 
       
 
       var everyElement = document.getElementsByClassName('textb'); 
 
       for(var i = 0; i < everyElement.length; i++){ 
 
        everyElement[ i ].classList.remove('noDisplay'); 
 

 
       } 
 
       var everyElement = document.getElementsByClassName('texta'); 
 
       for(var i = 0; i < everyElement.length; i++){ 
 
        everyElement[ i ].classList.remove('noDisplay'); 
 

 
       } 
 
       
 
       fadeIn(); 
 
       } 
 
      } 
 
      function removeNowA(){ 
 
      var everyElement = document.getElementsByClassName('textb'); 
 
      for(var i = 0; i < everyElement.length; i++){ 
 
       everyElement[ i ].classList.add('noDisplay'); 
 
      } 
 
      } 
 
      function removeNowB(){ 
 
      var everyElement = document.getElementsByClassName('texta'); 
 
      for(var i = 0; i < everyElement.length; i++){ 
 
       everyElement[ i ].classList.add('noDisplay'); 
 
      } 
 
      } 
 
      
 
      function fadeIn(){ 
 
      var everyElement = document.getElementsByClassName('textb'); 
 
      for(var i = 0; i < everyElement.length; i++){ 
 
       everyElement[ i ].classList.add('show'); 
 

 
      } 
 
      var everyElement = document.getElementsByClassName('texta'); 
 
      for(var i = 0; i < everyElement.length; i++){ 
 
      everyElement[ i ].classList.add('show'); 
 

 
      } 
 

 
      } 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <ul class="nav" id="navbar"> 
 
      <li class="nav" id="all"> 
 
       <a class="navsel" onclick="select(this);">Show All</a> 
 
      </li> 
 
      <li class="nav" id="texta"> 
 
       <a class="nav" onclick="select(this);">Text A</a> 
 
      </li> 
 
      <li class="nav" id="textb"> 
 
       <a class="nav" onclick="select(this);">Text B</a> 
 
      </li> 
 
     </ul> 
 
     <br /><br /> 
 
     <h1>Test</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     <h2 class="texta">Text A</h2> 
 
     <p class="texta">We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establish this Constitution for the United States of America.</p> 
 
     <h2 class="textb">Text B</h2> 
 
     <p class="textb"> 
 
      We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. 
 
      <br />That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, 
 
      <br />That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security. 
 
      <br />Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States. 
 
     </p> 
 
     <h1>More Text</h1> 
 
     <h2 class="texta">Text A</h2> 
 
     <p class="texta">Don't cry because it's over, smile because it happened.</p> 
 
     <h2 class="textb">Text B</h2> 
 
     <p class="textb">Live as if you were to die tomorrow. Learn as if you were to live forever.</p> 
 
    </body> 
 
</html>

Answer 2

我只是寫了一個快速的腳本給你，希望它會幫助你進一步。

.content { 
 
    opacity: 0; 
 
    transition: opacity .75s ease-in-out; 
 
} 
 
.show { 
 
    opacity: 1; 
 
    transition: opacity .75s ease-in-out; 
 
}

<button class="article-a" onclick="document.getElementById('contentA').className = 'show';">Text A</button> 
 
<button class="article-b" onclick="document.getElementById('contentB').className = 'show';">Text B</button> 
 
<button class="article-all" onclick="document.getElementById('contentA').className = 'show';document.getElementById('contentB').className = 'show';">All Text</button> 
 

 
<div id="contentA" class="content">First part</div> 
 
<div id="contentB" class="content">Second Part</div>

我相信這是最好使用opacity過渡，以後不透明度設置爲1，你可以隱藏的元素。

Answer 3

個人而言，我通過安裝淡入處理這種和淡出的JQuery方法於每一類的文本時，它被點擊。您可以通過一個簡單的JavaScript淡入在一個課堂上，另一出，反之亦然

$("#texta").click(function(){ 
    //Show texta and hide textb 
    $("#texta").fadeIn("slow"); 
    $("#textb").fadeOut("slow"); 
}); 

$("#textb").click(function(){ 
    //Show textb and hide texta 
    $("#textb").fadeIn("slow"); 
    $("#texta").fadeOut("slow"); 
}); 

$("#all").click(function(){ 
    //Show texta and hide textb 
    $("#texta").fadeIn("slow"); 
    $("#textb").fadeIn("slow"); 
});