Stackoverflow頁腳動畫是如何工作的？

Question

Stackoverflow頁腳動畫是如何工作的？

特別點擊一個元素（例如技術），擴展到更多。

Answer 1

主要的「訣竅」是讓所有元素都存在，但並非全部顯示。當前顯示的列表中給出的_visible類：

max-width: 200px; 
opacity: 1; 

和未示出的那些列表是通過默認：

max-width: 0 
opacity: 0 

當類被添加或移除時，過渡屬性all ease-in-out .15s很好動畫的每個元素。

jQuery方法將使用$('selector').toggleClass('_visible');。這個網站可能不是使用jQuery來切換類，但它達到了相同的結果。

$('#tech, button').on('click', function() { 
 
    $('nav, button').toggleClass('_visible'); 
 
})

div { 
 
    display: flex; 
 
} 
 

 
div>* { 
 
    -webkit-flex: 1 auto; 
 
    flex: 1 auto; 
 
    -webkit-flex-flow: row nowrap; 
 
    flex-flow: row nowrap; 
 
    transition: all ease-in-out .15s; 
 
} 
 

 
nav, 
 
button { 
 
    max-width: 0; 
 
    opacity: 0; 
 
} 
 

 
nav>ul { 
 
    margin: 0; 
 
    list-style: none; 
 
    white-space: nowrap; 
 
} 
 

 
._visible { 
 
    opacity: 1; 
 
    max-width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button><svg role="icon" class="svg-icon iconArrowLeftAlt" width="18" height="18" viewBox="0 0 18 18"><path d="M10.58 16L12 14.59 6.4 9 12 3.41 10.57 2l-7 7z"></path></svg></button> 
 
<div> 
 
    <nav class="_visible"> 
 
    <ul> 
 
     <li id=tech>Technology</li> 
 
     <li>Life/Arts</li> 
 
     <li>Culture/Recreation</li> 
 
     <li>Science</li> 
 
     <li>Other</li> 
 
     <li>Mobile</li> 
 
    </ul> 
 
    </nav> 
 
    <nav> 
 
    <ul> 
 
     <li>Stack Overflow</li> 
 
     <li>Server Fault</li> 
 
     <li>Super User</li> 
 
     <li>Web Applications</li> 
 
     <li>Ask Ubuntu</li> 
 
     <li>Webmasters</li> 
 
     <li>Game Development</li> 
 
    </ul> 
 
    </nav> 
 
    <nav> 
 
    <ul> 
 
     <li>TeX - LaTeX</li> 
 
     <li>Software Engineering</li> 
 
     <li>Unix &amp; Linux</li> 
 
     <li>Ask Different (Apple)</li> 
 
     <li>WordPress Development</li> 
 
     <li>Geographic Information Systems</li> 
 
     <li>Electrical Engineering</li> 
 
    </ul> 
 
    </nav> 
 
    <nav> 
 
    <ul> 
 
     <li>Android Enthusiasts</li> 
 
     <li>Information Security</li> 
 
     <li>Database Administrators</li> 
 
     <li>Drupal Answers</li> 
 
     <li>SharePoint</li> 
 
     <li>User Experience</li> 
 
     <li>Mathematica</li> 
 
    </ul> 
 
    </nav> 
 
    <nav> 
 
    <ul> 
 
     <li>Salesforce</li> 
 
     <li>ExpressionEngine® Answers</li> 
 
     <li>Blender</li> 
 
     <li>Network Engineering</li> 
 
     <li>Cryptography</li> 
 
     <li>Code Review</li> 
 
     <li>Magento</li> 
 
    </ul> 
 
    </nav> 
 
    <nav> 
 
    <ul> 
 
     <li>Software Recommendations</li> 
 
     <li>Signal Processing</li> 
 
     <li>Emacs</li> 
 
     <li>Raspberry Pi</li> 
 
     <li>Programming Puzzles &amp; Code Golf</li> 
 
     <li>Ethereum</li> 
 
     <li>Data Science</li> 
 
    </ul> 
 
    </nav> 
 
    <nav class="_visible"> 
 
    <ul> 
 
     <li>Blog</li> 
 
     <li>Facebook</li> 
 
     <li>Twitter</li> 
 
     <li>LinkedIn</li> 
 
     <li>site design/logo © 2017 Stack Exchange Inc</li> 
 
    </ul> 
 
    </nav> 
 
</div>