Stackoverflowフッターアニメーションはどのように機能しますか？

Question

Stackoverflowフッターアニメーションはどのように機能しますか？

特に、1つの要素（例：テクノロジー）をクリックすると、さらに拡大します。

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>