javascript - How does the Stackoverflow footer animation work? -


how stackoverflow footer animation work?

particularly clicking on 1 element (e.g. technology), expand more.

the main "trick" have elements present, not shown. shown lists given _visible class:

max-width: 200px; opacity: 1;

and lists not shown default:

max-width: 0 opacity: 0

when class added or removed, transition property all ease-in-out .15s nicely animates each element.

a jquery approach using $('selector').toggleclass('_visible');. site not using jquery toggle classes, achieves same result.

$('#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: 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>


Comments

Post a Comment

Popular posts from this blog

PHP and MySQL WP -

i trying accomplish 2 things here code. writing php directly wp page using insert php plugin. 1) query mysql database , return results 1 column 4 columns. 2) make each result own hyperlink directs user new wp page runs new query on page. i able query show results , turn results dynamic hyperlink, cannot formatting down. right returns result 1 column. here have: [insert_php] $servername = "localhost"; $username = "login"; //edited privacy $password = "password"; //edited privacy $database = "database"; //edited privacy // create connection $conn = new mysqli($servername, $username, $password, $database); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } echo "connected successfully"; //get results database $result = mysqli_query($conn,"select mine mines order mine"); $all_property = array(); //declare array saving property //showing proper...
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

go - golang pprof for c library code -

i have been trying profile golang application pprof, seems details of c code(linked static library) missed in output result. flame graph from frame graph can see c code time consuming reported within "runtime._externalcode", no details @ all. , sure static library compiled debug enable. so there way make pprof details(like stack trace) of 3rd party c code? or there other golang profiling tool this?
Read more