CSS Переход игнорируется медиа-запросом - PullRequest
Новая
       13

CSS Переход игнорируется медиа-запросом

0 голосов
/ 10 января 2020 

.burger-button {
  display: flex;
  opacity: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
  width: 35px;
  height: 35px;
  box-sizing: border-box;
  background-color: #000;
  position: fixed;
  top: 10px;
  left: 10px;
  transition: opacity 1s ease-out 1s
}

.burger-button span {
  display: inline-block;
  width: 100%;
  height: 4px;
  background-color: #fff
}

@media(max-width: 500px) {
  .burger-button {
    opacity: 1
  }
}
<!DOCTYPE html>
<html>


<body>

  <a href="#" id="jQ-burger">
    <div class="burger-button">
      <span></span><span></span><span></span>
    </div>
  </a>

</body>

</html>

Я использую этот код CSS для отображения бургера, когда размер области просмотра становится меньше. Если я изменяю размер своего окна на рабочем столе, переход (переход: непрозрачность 1 с, ослабление 1 с) игнорируется. Кнопка появляется без задержки и без перехода. Но если я использую инструменты разработчика и выключаю / включаю opactiy: 1, тогда это работает. Есть идеи?

...