Display element only when transition is finished - html

Question

When nav-toggle is checked sidebar reduces width and span is not displayed. When nav-toggle is unchecked it all comes back, but span displays the moment nav-toggle is unchecked and takes vertical space until sidebar is wide enough.
.sidebar {
width: 345px;
transition: width 300ms;
}
#nav-toggle:checked+.sidebar {
width: 70px;
}
#nav-toggle:checked+.sidebar li a span:last-child {
display: none;
}
<input type="checkbox" name="" id="nav-toggle">
<div class="sidebar">
<div class="sidebar-brand">
<h2><span class="lab la-accusoft"></span> <span>Acusoft</span></h2>
</div>
<div class="sidebar-menu">
<ul>
<li>
<a href="" class="active"><span class="las la-igloo"></span>
<span>Dashboard</span>
</a>
</li>
<li>
<a href=""><span class="las la-users"></span>
<span>Customers</span>
</a>
</li>
</ul>
</div>
</div>
I need to delay displaying 'span' until after transition is finished or sidebar is wide enough.

Answer 1

You could try changing the display: none into an opacity: 0, and have another transition with a transition-delay
This may not be an exact answer but could help you in the right direction. https://jsfiddle.net/treckstar/9uqgmnfk/16/
body {
font-size: 16px;
}
.app {
display: flex;
flex-flow: row nowrap;
max-width: 100%;
padding: 20px 0px 0px 0px;
position: relative;
}
#nav-toggle {
position: absolute;
top: 0px;
left: 0px;
}
.nav-toggle-label {
position: absolute;
top: 0px;
left: 20px;
}
.main-content {
flex: 1 0 auto;
height: 50vh;
background: #eee;
padding: .5rem 2rem;
}
.sidebar {
flex: 0 0 20%;
padding: .5rem 2rem;
height: 50vh;
transition: all 1s ease;
background-color: #ccc;
}
#nav-toggle:checked+.sidebar {
flex: 0 0 5%;
padding: .5rem .5rem;
}
.sidebar ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.sidebar li a span {
opacity: 1;
transition: opacity .2s ease;
transition-delay: 1.25s;
}
#nav-toggle:checked+.sidebar li a span:last-child {
opacity: 0;
}
<div class="app">
<label class="nav-toggle-label" for="nav-toggle">Toggle</label>
<input type="checkbox" name="cb" id="nav-toggle">
<div class="sidebar">
<div class="sidebar-brand">
<h2><span class="lab la-accusoft"></span> <span>Acusoft</span></h2>
</div>
<div class="sidebar-menu">
<ul>
<li>
<a href="" class="active"><span class="las la-igloo"></span>
<span>Dashboard</span>
</a>
</li>
<li>
<a href=""><span class="las la-users"></span>
<span>Customers</span>
</a>
</li>
</ul>
</div>
</div>
<main class="main-content" role="main">
<h2>
Main Content
</h2>
</main>
</div>