Html 媒体查询触发时不需要的转换_Html_Css

Html 媒体查询触发时不需要的转换

html css

Html 媒体查询触发时不需要的转换,html,css,Html,Css,我有一个在导航中设置UL高度动画的过渡。这只适用于手机。我使用媒体查询在视口更宽时更改导航当您使视口宽度变小时，一旦触发媒体查询，您可以看到UL高度动画，因为我正在进行转换。我发现只有两种方法可以阻止这种情况，要么完全丢失转换，要么只有在选中复选框时转换才会发生。最初将UL显示为“无”，但由于我需要将显示设置为“块”，转换丢失下面是我的代码示例。希望有人能帮助解决问题谢谢 HTML: <!DOCTYPE html> <html lang="en"> <

我有一个在导航中设置UL高度动画的过渡。这只适用于手机。我使用媒体查询在视口更宽时更改导航

当您使视口宽度变小时，一旦触发媒体查询，您可以看到UL高度动画，因为我正在进行转换。我发现只有两种方法可以阻止这种情况，要么完全丢失转换，要么只有在选中复选框时转换才会发生。最初将UL显示为“无”，但由于我需要将显示设置为“块”，转换丢失

下面是我的代码示例。希望有人能帮助解决问题

谢谢

HTML:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href='http://fonts.googleapis.com/css?family=Fira+Sans:400,500,700|Ovo|Varela' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/styles.css">
    </head>

    <body>
        <!-- Navigation -->
        <input type="checkbox" id="navbar-checkbox" class="navbar-checkbox" autocomplete="off">
        <nav>
            <div id="nav_overlay"></div>
            <ul>
                <li><a href="#" title="About Daniel Sams" class="border">Home</a></li>
                <li><a href="#" title="Daniel Sams Work" class="border">My Work</a></li>
                <li><a href="#" title="Contact Daniel Sams">Contact</a></li>
            </ul>
            <div class="navbar_handle">
                <label for="navbar-checkbox" class="navbar_menu"></label>
            </div>

        </nav>
        </body>
    </html>

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;
  }
}