Question

我有一个转换，可以在我的导航中激活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>

CSS：

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

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

0 个答案: