我的两个CSS动画同时发生.怎么做到这样只有在另一个完全完成后才会发生？

Question

我有一个侧滑菜单栏.我做了两个.一个带有菜单图标,您可以单击以关闭它并打开另一个带有关闭图标的菜单栏.

问题是我的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>

Answer 1

您需要在转换上设置延迟:

transition-delay:1s;

问题是这将在打开和关闭时适用.所以要修复它,添加和删除CSS类而不是width直接戳:

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

在下面的示例中,我还添加了transition-timing-functions,因此关闭速度会随着时间的推移而增加,并且开启速度会变慢.并且缩短了时间.看起来更漂亮.

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>