CSS-переход работает, только если открыты Chrome Dev Tools - PullRequest
Новая
       7

CSS-переход работает, только если открыты Chrome Dev Tools

0 голосов
/ 10 мая 2018

Я столкнулся со странной аномалией с переходами CSS.Переход полностью игнорируется при нагрузке;но если я открою Chrome Dev Tools и перейду по дереву DOM к #popup > div > img и выберу его, затем щелкните по основному изображению, переход станет функциональным и останется таковым, даже если Dev Tools закрыт.

Myесть подозрение, что я совершил странную ошибку, которую не вижу.Но при открытии Dev Tools, чтобы попытаться проверить мой CSS, он вдруг начинает работать, это немного сложно для отладки!

Протестировано на Chrome 66.0.3359.139.Поведение в Codepen такое же, как и в отдельном HTML-файле.

Я хочу щелкнуть маленькое изображение, чтобы показать увеличенное.При отображении всплывающего окна нажатие в любом месте приведет к его удалению.Как показ, так и отклонение всплывающего окна должны переходить плавно;для этой демонстрации это изменение непрозрачности, сопровождаемое изменением вершины изображения (заставляя его прокручиваться сверху экрана).Всплывающее окно управляется установкой класса для элемента HTML. 

document.getElementById("clickme").onclick = function(ev) {
  document.documentElement.classList.add("show-modal");
  ev.stopPropagation();
}
document.documentElement.onclick = function() {
  this.classList.remove("show-modal");
}
#clickme {
  max-height: 300px;
  cursor: pointer;
  margin: 20px;
  border: 1px solid #ddd;
  border-radius: .25rem;
  padding: 10px;
}

#popup {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0px;
  z-index: 2000;
  padding-top: 30px;
  display: none;
}

.show-modal #popup {
  display: block;
}

#popup img {
  display: block;
  margin: auto;
  position: relative;
  top: -500px;
  opacity: 0;
  transition: top .5s 1s, opacity .25s;
}

.show-modal #popup img {
  top: 0px;
  opacity: 1;
}

#popup>div {
  margin: auto;
}
<p><img id=clickme src="http://devicatoutlet.com/img/birthday.png"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, ipsum at porttitor condimentum, turpis ex porta erat, et laoreet purus dui a quam. Vestibulum eget consequat neque, in faucibus turpis. Interdum et malesuada fames ac ante ipsum primis
  in faucibus. Praesent interdum sit amet odio eu consequat. Aliquam eget scelerisque odio. Suspendisse potenti. Aenean at risus a dolor facilisis dignissim. Sed et volutpat eros. Nam eget imperdiet lacus. Mauris imperdiet rutrum efficitur.</p>
<div id="popup">
  <div><img src="http://devicatoutlet.com/img/birthday.png"></div>
</div>

Посмотреть на CodePen

1 Ответ

0 голосов
/ 10 мая 2018

CSS не может анимировать между display: none; и display: block; (элемента #popup). Я изменил видимость на #popup.

Вы можете увидеть новый код здесь: https://codepen.io/anon/pen/KRoPwM. Надеюсь, это поможет.

...