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>

Stackoverflow页脚动画如何工作？

1 个答案: