我的两个CSS动画同时发生。 如何使一个只有在另一个完全完成之后才发生？

Question

I have a sliding side menu bar. I made two of them. One with a menu icon you can click to close it and open the other menu bar with a close icon.

The problem is my JS code and also the CSS transition animation don't give enough time for one to close before the other start to expand. So the two menu bars meet in the middle and create a messy animation.

 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

You need to set a delay on the transition:

transition-delay:1s;

The problem is that this will apply when opening and when closing. So to fix that, add and remove a CSS class instead of poking at the width directly:

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

In the example below, I've also added transition-timing-function s so the closing speeds up over time, and the opening slows down. And reduced the timings a bit. Looks nicer that way.

 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> 

Answer 2

The most performant way to do this is with CSS. Add a transition-delay .

.sidenav2{
  transition-delay: 1s;
}

Answer 3

 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> 

Just add the setTimeout that is equal to your transition time.

Answer 4

You can do it with setTimeout() , like this:

 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>