title: Unwanted transition when media query triggers
body: <p>I have a transition that animates the height of the UL within my navigation. This is only for mobiles. I have used a media query to change the navigation when the viewport is wider.</p>
  
  <p>When you make the viewport smaller in width, once the media query is triggered you can see that the UL height animates because I have a transition going on. The only two ways I've found that stop this are either lose the transition completely, or only have it so the transition happens when the checkbox is checked. Initially displaying the UL as none worked, however as I need to then set the display to block, the transition is lost. </p>
  
  <p>Here is my code example. Hopefully someone can help with a workaround.</p>
  
  <p>Thanks.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
          &lt;link href='http://fonts.googleapis.com/css?family=Fira+Sans:400,500,700|Ovo|Varela' rel='stylesheet' type='text/css'&gt;
          &lt;link rel="stylesheet" href="css/styles.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;!-- Navigation --&gt;
          &lt;input type="checkbox" id="navbar-checkbox" class="navbar-checkbox" autocomplete="off"&gt;
          &lt;nav&gt;
              &lt;div id="nav_overlay"&gt;&lt;/div&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#" title="About Daniel Sams" class="border"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" title="Daniel Sams Work" class="border"&gt;My Work&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" title="Contact Daniel Sams"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="navbar_handle"&gt;
                  &lt;label for="navbar-checkbox" class="navbar_menu"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
          &lt;/nav&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a {
    text-decoration: none;
    color: inherit;
  }
  
  .navbar-checkbox {
    display: none;
  }
  
  nav {
    position: fixed;
    width: 100%;
    top: 0;
  }
  nav ul {
    position: relative;
    -webkit-transition: height .2s linear;
    transition: height .2s linear;
    height: 0;
    background-color: #2b2b2b;
    overflow: hidden;
    color: white;
    padding: 0;
    text-align: center;
    margin: 0;
    z-index: 3;
  }
  nav li {
    -webkit-transition: visibility .4s linear;
    transition: visibility .4s linear;
    visibility: hidden;
  }
  nav li:hover {
    background-color: #0b0b0b;
  }
  nav li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    display: block;
    padding: 1.25em;
  }
  nav .border {
    border-bottom: 1px solid #f6f6f6;
  }
  nav .navbar_handle {
    position: relative;
    border-top: 4px solid #de1b1b;
    width: 100%;
    background: #f6f6f6;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    z-index: 3;
  }
  nav .navbar_handle .navbar_menu {
    font-family: dan_custom-font;
    width: auto;
    height: 100%;
    float: right;
    padding: 10px;
    margin-right: 0.5em;
    cursor: pointer;
    color: #de1b1b;
    text-align: center;
    -webkit-transition: color .3s;
    transition: color .3s;
  }
  nav .navbar_handle .navbar_menu:before {
    content: 'Menu';
    font-size: 2em;
    line-height: 1em;
  }
  nav .navbar_handle .navbar_menu:after {
    display: none;
  }
  nav #nav_overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    visibility: hidden;
    background: #000;
    opacity: 0;
    -webkit-transition: all .4s;
    transition: all .4s;
    z-index: 2;
  }
  
  #navbar-checkbox:checked + nav ul {
    height: 12.1875em;
  }
  #navbar-checkbox:checked + nav li {
    visibility: visible;
    width: 100%;
    display: block;
  }
  #navbar-checkbox:checked + nav #nav_overlay {
    visibility: visible;
    opacity: .7;
  }
  #navbar-checkbox:checked + nav .navbar_menu:before {
    display: none;
  }
  #navbar-checkbox:checked + nav .navbar_menu:after {
    display: block;
    content: 'Close';
    font-size: 2em;
    line-height: 1em;
  }
  
  .main {
    line-height: 1.5em;
  }
  
  @media only screen and (min-width: 42em) {
    nav {
      background: #f6f6f6;
    }
    nav ul {
      display: block;
      background: none;
      float: right;
      height: 3.75em;
      color: #2b2b2b;
      -webkit-transition: none;
      transition: none;
    }
    nav ul li {
      visibility: visible;
      display: inline-block;
      -webkit-transition: none;
      transition: none;
    }
    nav .navbar_handle {
      display: none;
    }
    nav .border {
      border-bottom: none;
    }
  }
  </code></pre>