html - 需要帮助才能理解。我无法完全控制过渡属性

Question

这是交易。我正在尝试使用 css3、html5 和转换属性创建移动优先导航栏。到目前为止，我已经成功了，但是当我调整窗口大小时(使用媒体查询最小宽度)从桌面 View 到移动 View 时，我无法控制转换。我在移动 View 中添加了一个切换按钮，以创建一个汉堡菜单，该菜单在 600 像素处消失，反之亦然。当未选中按钮(菜单不可见)并且我将 View 从桌面调整为移动时，我不希望出现非常快速的过渡。到目前为止，我已经尝试了很多变体，但似乎没有任何效果。任何建议将不胜感激!

    * {
        margin: 0;
        padding: 0;
        outline: none;
        box-sizing: border-box;
    }
    body {
        background: #eee;
        color: #444;
        -webkit-font-smoothing: antialiased;
        font-family: Arial, sans-serif;
        font-weight: 400;
        height: auto !important;
        height: 100%;
        min-height: 100%;
        text-rendering: optimizeLegibility;
    }
    header {
        display: block;
        background-color: #FFF;
        height: inherit;
    }
    nav {
        text-align: center;
        line-height: 3.5em;
    }
    nav ul {
        background-color: rgba(255, 255, 255, 0.15);
        float: none;
        line-height: inherit;
        margin: 0;
    }
    nav ul li {
        display: block;
        list-style-type: none;
    }
    nav ul li:hover {
        background-color: #ededed;
    }
    nav ul li a {
        text-decoration: none;
        color: #313131;
    }
    nav ul li a:hover {
        color: #b9b5b5;
    }
    #menuToggle {
        display: none;
    }
    .menu {
        width: 100%;
        position: absolute;
        top: 66px;
        transition: all 300ms ease-in-out;
    }
    .menu-icon {
        float: right;
        color: #2f2f2f;
        cursor: pointer;
        padding-top: 0.46em;
        padding-right: 1em;
        padding-left: 1em;
        padding-bottom: 0.46em;
        text-decoration: none;
        font-size: 30px;
    }
    .menu {
      max-height: 0;
      transition-property: max-height 0s ease-in-out;
      overflow: hidden;
    }
    #menuToggle:checked ~ header .menu {
      max-height: 300px;
      transition-property: all 0.6s ease-in-out;
    }
    #logo {
        float: none;
        text-align: left;
        padding-top: 7px;
        padding-left: 2em;
        height: inherit;
    }
    /*------------ MEDIUM BIG SCREEN -----------------------*/
        @media screen and (min-width:600px) {
    #logo {
          float: left;
    }
    .menu {
        position: relative;
        top: -70px;
        height: 100%;
        max-height: 100%;
        transition-property: none;
    }
    .menu-icon {
        display: none;
    }
    header {
        height: 70px;
        background-color: #FFF;
        margin: auto;
        width: 100%;
    }
    nav {
        width: 100%;
    }
    nav ul {
        background-color: #FFF;
        display: block;
        float: right;
        padding: 0.55em 2em 0 0;
        height: inherit;
    }
      nav ul li {
        display: inline-flex;
    }
      nav ul li:hover {
        background-color: #FFF;
    }
      nav ul li a {
        padding: 0 2em;
    }

    <!-- === MENUTOGGLE === -->

    <input type="checkbox" name="checkbox" id="menuToggle" value="value">
    <label for="menuToggle" class="menu-icon">&#9776;</label>

    <!--  ==== HEADER ==== --> 
   
    <header class="header">
    <div id="logo">
       <h1><img src="images/logo.png" alt="Hello"></h1>
    </div>
       <nav class="menu">
            <ul>
                <li><a href="#">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog </a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

Answer 1

把你只想发生的一切都放在里面的小屏幕上:

@media screen and (max-width:599px) {

}

所有你只想在你的大屏幕上发生的事情:

@media screen and (min-width:600px) {

}