Можно ли изменить скорость перехода при выключении? - PullRequest
Новая
       6

Можно ли изменить скорость перехода при выключении?

0 голосов
/ 28 октября 2018

У меня есть раскрывающееся меню со следующим css: 

transition: height 2s;

При нажатии значка меню / гамбургера раскрывающееся меню включается, и переход работает великолепно.Однако, если снова щелкнуть значок меню / гамбургера, чтобы закрыть выпадающий список (отключить), я бы хотел, чтобы переход был мгновенным 0s.Можно ли изменить скорость для выключения, используя только CSS (без сложной анимации)? 

<input type="checkbox" id="toggle">
<label for="toggle">Menu</label>
<nav>
    <ul>
        <li><a href="work.html">Work</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</nav>





#toggle {
    display: none;
    }

#toggle ~ label {
    display: inline-block;
    cursor: pointer;
    float:right;
    font-size:2.1rem;
    line-height:7.1rem;
    }

nav {
    height:0;
    position:absolute;
    background-color:rgb(0,171,160);
    top:7.2rem;
    left:0;
    right:0;
    z-index:102;
    text-align:center;
    font-size:4.8rem;
    line-height:1.75em;
    transition: height 2s;
    overflow:hidden;
    }

#toggle:checked ~ nav {
    height: 100%;
    }

1 Ответ

0 голосов
/ 28 октября 2018

Вам необходимо определить два перехода, как показано ниже: 

#toggle {
  display: none;
}

#toggle~label {
  display: inline-block;
  cursor: pointer;
  float: right;
  font-size: 2.1rem;
  line-height: 7.1rem;
}

nav {
  height: 0;
  position: absolute;
  background-color: rgb(0, 171, 160);
  top: 7.2rem;
  left: 0;
  right: 0;
  z-index: 102;
  text-align: center;
  font-size: 4.8rem;
  line-height: 1.75em;
  transition: height 0s; /* this one */
  overflow: hidden;
}

#toggle:checked~nav {
  height: 100%;
  transition: height 2s; /* this one */
}
<input type="checkbox" id="toggle">
<label for="toggle">Menu</label>
<nav>
  <ul>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
...