переход <div>создает границу для другого элемента - PullRequest
Новая
       28

переход <div>создает границу для другого элемента

0 голосов
/ 24 января 2019

Если вы будете парить между двумя границами, вы получите уродливую (но очень маленькую) границу вокруг них.Может ли кто-нибудь помочь мне (и, пожалуйста, объясните мне, почему я получаю этот результат)?Я пытался установить прозрачную рамку для каждого элемента - но без эффекта.

С уважением, Сандро 

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.content {
  height: 100vh;
  width: 50vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.content .line-left {
  width: 3px;
  height: 100%;
  background-color: #286090;
  position: absolute;
  left: 25px;
  bottom: 0;
}

.content .line-left::after {
  content: '';
  width: 3px;
  height: 100%;
  background-color: #bfbfbf;
	position: absolute;
  bottom: 0;
}

.content .line-right {
  width: 3px;
  height: 100%;
  background-color: #286090;
  position: absolute;
  top: 0;
  right: 25px;
}

.content .line-right::after {
  content: '';
  width: 3px;
  height: 100%;
  background-color: #bfbfbf;
	position: absolute;
  top: 0;
}

.content:hover .line-left::after, .content:hover .line-right::after {
  height: 0;
  transition: height 2s cubic-bezier(.15,.65,1,.15);
}
<div class="content">
  <div class="line-left"></div>
  <div class="line-right"></div>
</div>

1 Ответ

0 голосов
/ 24 января 2019

Кажется, это проблема с откатом.Вот еще одна идея, чтобы получить тот же эффект без проблем и с меньшим количеством кода.Мы определяем 4 линии с градиентом: две на каждой стороне и в той же позиции.При наведении мы просто уменьшаем высоту серых и увеличиваем высоту синих.top / bottom будет определять направление анимации: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  height: 100vh;
  width: 50vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(#286090,#286090) bottom 0 right 25px,
    linear-gradient(#bfbfbf,#bfbfbf) top    0 right 25px,
    linear-gradient(#286090,#286090) top    0 left  25px,
    linear-gradient(#bfbfbf,#bfbfbf) bottom 0 left  25px;
  background-size:3px 0, 3px 100%;
  background-repeat:no-repeat;
  transition:2s cubic-bezier(.15, .65, 1, .15);
}

.content:hover {
  background-size:3px 100%, 3px 0;

}
<div class="content">
</div>
...