У меня есть скользящая боковая строка меню. Я сделал два из них. Один со значком меню вы можете щелкнуть, чтобы закрыть его, и открыть другую строку меню со значком закрытия.

Проблема заключается в моем JS-коде, а также в анимации перехода CSS, которая не дает достаточно времени для закрытия одного, прежде чем другой начнет расширяться. Таким образом, две строки меню встречаются посередине и создают грязную анимацию.

function closeIt(){
  document.getElementById('mysidenav').style.width='0px';
  document.getElementById('mysidenav2').style.width='20%';
}
function openIt(){
  document.getElementById('mysidenav').style.width='20%';
  document.getElementById('mysidenav2').style.width='0px';
}
*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
  width:100%;
}
.sidenav{
  height:100%;
  width:20%;
  background:#111;
  transition:1s;
  overflow-x:hidden;
}
.sidenav a{
  font-size:90px;
  color:#818181;
}
/*SECOND SIDE BAR*/
.sidenav2{
  height:100%;
  width:0%;
  background:#111;
  overflow-x:hidden;
  position:fixed;
  top:0;
  transition:1s;
}
.sidenav2 a {
  font-size:50px;
  color:#818181;
}
<div id='mysidenav'class='sidenav'>
  <a onclick='closeIt()'>&times<a>
</div>
    
<div id='mysidenav2'class='sidenav2'>
  <a onclick='openIt()'>&#9776<a>
</div>
0
most venerable sir 29 Авг 2017 в 17:38

4 ответа

Лучший ответ

Вам нужно установить задержку при переходе:

transition-delay:1s;

Проблема в том, что это будет применяться при открытии и при закрытии. Поэтому, чтобы это исправить, добавьте и удалите класс CSS вместо того, чтобы тыкать в width напрямую:

.hidden-sidenav {
  width:0;
  transition-delay:0s;
}

В приведенном ниже примере я также добавил transition-timing-function s, чтобы со временем скорость закрытия увеличивалась, а скорость открытия замедлялась. И немного сократил время. Так выглядит лучше.

function closeIt(){
  document.getElementById('mysidenav').classList.add('hidden-sidenav');
  document.getElementById('mysidenav2').classList.remove('hidden-sidenav');
}
function openIt(){
  document.getElementById('mysidenav').classList.remove('hidden-sidenav');
  document.getElementById('mysidenav2').classList.add('hidden-sidenav');
}
*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
  width:100%;
}

.sidenav{
  height:100%;
  width:20%;
  background:#111;
  transition:0.4s;
  transition-delay:0.4s;
  transition-timing-function:ease-out;
  overflow-x:hidden;
}
.sidenav a{
  font-size:90px;
  color:#818181;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
  height:100%;
  width:20%; /* Changed to 20%: visible by default. */
  background:#111;
  overflow-x:hidden;
  position:fixed;
  top:0;
  transition:0.4s;
  transition-timing-function:ease-out;
  transition-delay:0.4s;
}
.sidenav2 a {
  font-size:50px;
  color:#818181;
}
.hidden-sidenav { /* Must come after .sidenav and .sidenav2 to override them. */
  transition-delay:0s;
  transition-timing-function:ease-in;
  width:0;
}
<div id='mysidenav'class='sidenav'>
  <a onclick='closeIt()'>&times<a>
</div>
    
<div id='mysidenav2'class='sidenav2 hidden-sidenav'>
  <a onclick='openIt()'>&#9776<a>
</div>
5
Thomas 29 Авг 2017 в 14:54

Вы можете сделать это с помощью setTimeout() , например так:

function closeIt() {
  document.getElementById('mysidenav').style.width = '0px';
  window.setTimeout(function() {
    document.getElementById('mysidenav2').style.width = '20%';
  }, 1000);
}

function openIt() {
  document.getElementById('mysidenav2').style.width = '0px';
  window.setTimeout(function() {
    document.getElementById('mysidenav').style.width = '20%';
  }, 1000);
}
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.sidenav {
  height: 100%;
  width: 20%;
  background: #111;
  transition: 1s;
  overflow-x: hidden;
}

.sidenav a {
  font-size: 90px;
  color: #818181;
}


/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/

.sidenav2 {
  height: 100%;
  width: 0%;
  background: #111;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  transition: 1s;
}

.sidenav2 a {
  font-size: 50px;
  color: #818181;
}
<div id='mysidenav' class='sidenav'>
  <a onclick='closeIt()'>&times<a>
</div>
    
<div id='mysidenav2'class='sidenav2'>
  <a onclick='openIt()'>&#9776<a>
</div>
0
Peter B 29 Авг 2017 в 14:50
function closeIt(){
  document.getElementById('mysidenav').style.width='0px';
  setTimeout(function () {
    document.getElementById('mysidenav2').style.width='20%';
  }, 1000);
}
function openIt(){
  document.getElementById('mysidenav2').style.width='0px';
  setTimeout(function () {
    document.getElementById('mysidenav').style.width='20%';
  }, 1000);
}
*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
  width:100%;
}

.sidenav{
  height:100%;
  width:20%;
  background:#111;
  transition:1s;
  overflow-x:hidden;
}
.sidenav a{
  font-size:90px;
  color:#818181;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
  height:100%;
  width:0%;
  background:#111;
  overflow-x:hidden;
  position:fixed;
  top:0;
  transition:1s;
}
.sidenav2 a {
  font-size:50px;
  color:#818181;
}
<div id='mysidenav'class='sidenav'>
  <a onclick='closeIt()'>&times<a>
</div>
    
<div id='mysidenav2'class='sidenav2'>
  <a onclick='openIt()'>&#9776<a>
</div>

Просто добавьте setTimeout, который равен вашему времени перехода.

0
Sergey 29 Авг 2017 в 14:43

Самый эффективный способ сделать это с помощью CSS. Добавьте transition-delay.

.sidenav2{
  transition-delay: 1s;
}
1
TylerH 29 Авг 2017 в 15:33