1

Как сделать эффект всплывающего окна по следующему принципу поведения:

После нажатия на какую-то кнопку, посреди экрана появляется всплывающая строка шириной как ширина будущего окна и высотой 1px, далее например каждую 1 миллисекунду равномерно сверху и снизу дорисовываются линии к первоначальной, как только площадь этих линий будет как площадь всплывающего окна - на их месте появляется само окно. Возможно я не корректно выразил теорию того как это должно происходить, но надеюсь что суть будет ясна. Подскажите, как рисовать всплывающие линии на экране.

1 ответ 1

2

Возможно вам подойдет такой вариант, при нажатии на кнопку, появляется все окно, начинается отрисовка линий, потом с задержкой, равной полной прорисовки линии, появляется контент. Думаю вы сможете все настроить по времени меняя значение transition-delay и transition.

$('#click').on('click', function() {
  $(".modal").addClass("active");
});
.modal {
  width: 200px;
  height: 200px;
  position: relative;
  padding: 2rem;
}
.content {
  opacity: 0;
  transition: 0.3s ease-out;
  -webkit-transition: 0.3s ease-out;
}
.modal.active .content {
  opacity: 1;
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
}
.frame {
  position: absolute;
  transition: 0.5s ease-out;
  background-color: black;
}
.frame-top {
  top: 0;
  right: 0;
  height: 2px;
  width: 0%;
}
.frame-left {
  left: 0;
  bottom: 0;
  width: 2px;
  height: 0%:
}
.frame-right {
  right: 0;
  bottom: 0;
  width: 2px;
  height: 0%:
}
.frame-bottom {
  width: 0%;
  height: 2px;
  left: 0;
  bottom: 0;
}
.modal.active .frame-top,
.modal.active .frame-bottom {
  width: 100%;
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}
.modal.active .frame-right,
.modal.active .frame-left {
  height: 100%;
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  <div class="frame-top frame"></div>
  <div class="frame-bottom frame"></div>
  <div class="frame-left frame"></div>
  <div class="frame-right frame"></div>
  <div class="content">
    <h1>Content</h1>
  </div>
</div>

<div id="click">Clcik</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.