Я анимировал ширину элемента, но граница элемента исчезает при запуске анимации - PullRequest
Новая
       19

Я анимировал ширину элемента, но граница элемента исчезает при запуске анимации

0 голосов
/ 19 июня 2019

На моей новой веб-странице есть элемент, который меняет свою ширину при уменьшении.Однако один из дочерних элементов имеет набор свойств border-bottom, и граница завершается до завершения анимации.

Я загрузил файлы своего веб-сайта в CodeSandbox, чтобы продемонстрировать проблему, поскольку публикация кода здесьтребуется полная перезапись, так как мои скрипты импортируются как модули.

https://wkkpj.codesandbox.io/

Нажмите на значок белой стрелки в левой части страницы.Этот значок находится в коробке.Справа от этого есть еще одна коробка.Эта «коробка справа» - это коробка, граница которой исчезает.Попробуйте развернуть и свернуть боковую панель несколько раз, и вы заметите проблему.

Я уже пытался переместить границу в отдельный элемент, и первоначально в этом коде не было div-оболочки.Это была просто еще одна попытка решить проблему.

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Это потому, что вы переключаете боковую панель с grid-template-rows: 30px 1fr; на grid-template-columns: 30px 0px; Если вы не включите ее, у вас не будет этой проблемы. Я сделал простой пример из вашего кода: 

document.addEventListener('click', function (event) {
  if (!event.target.matches('.toggle')) return;
  event.preventDefault();
  var sidebarLeft = document.getElementById('sidebar-left');
  if (sidebarLeft.classList.contains('clicked')) {
    sidebarLeft.classList.remove('clicked');
  } else {
    sidebarLeft.classList.add('clicked');
  }
}, false);
#body, #wrapper {
  display: grid;
}

#body{
  grid-template-rows: 60px 1fr 30px;
  grid-template-areas: "a a a" "b c d" "e e e";
  grid-template-columns: auto 1fr auto;
  width: 100%;
  height: 100vh;
  background: pink;
}
#header{
  grid-area: a;
}
.sidebar.left {
    grid-area: b;
    width: 240px;
    transition: all 0.5s;
}
.wrapper{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
#content {
  grid-area: c;
  background-color: #0f111aff;
}
.toggle{
  background: gray;
  line-height: 30px;
  width: 30px;
  text-align: center;
  color: white;
  cursor: pointer;
}
#sidebar-left.clicked{
  width: 30px;
}
 
<div id='body'>
  <div id='header'></div>
  
  <div class='sidebar left' id='sidebar-left'>
    <div class='wrapper'>
      <div class='toggle'>
       <
      </div>
    </div>
  </div>
  
  <div id='content'>
   
  </div>
</div>

Если вы чувствуете, что вам абсолютно необходим шаблон сетки. Вы можете использовать js, чтобы вызвать это после .5s (продолжительность перехода). Я пытался сделать это с помощью CSS-анимации, но кажется, что он не срабатывает на grid-template-rows / grid-template-columns.

Совет 1 - Всегда делайте самый простой пример вашей проблемы. Это помогает, если вы разместите код здесь или, по крайней мере, где-нибудь, мы можем легко отредактировать его.

Совет 2 - Не используйте один и тот же идентификатор несколько раз в HTML

0 голосов
/ 19 июня 2019

Я сделал некоторую отладку:

Когда вы скользите влево, ваша обертка не имеет аминирования. Установите время перехода на 10 секунд. Вы увидите, что оболочка мгновенно сжимается. Этого не происходит, когда скользит обратно в середину. Вот и моя граница исчезает.

Остальное зависит от вас;)

...