Issue with CSS animation and ng-hide for shrinking sidebar - css

Question

I have a sidebar which can be shrinked. On shrinking, only the corresponding logos are visible.
The problem with it is that the shrink/unshrink animation is not right - on unshrinking, when 'ng-hide' is not active (the element is being showed), it gets on to the next line because it cant fit into the available width. And after the with animation is complete, it fits. As you can understand, this is not a good UX.
Here is the demo of my problem:
button{
margin-bottom: 50px;
}
#bar{
background: yellow;
width: 200px;
transition: all 0.5s linear;
}
#bar div{
border: 1px solid red;
}
#bar.shrinked{
width: 50px;
}
#bar div span:first-child{
font-size: 75%;
}
span.menu {
width: 100px;
height: 100px;
position: relative;
-webkit-animation: glowy 0.5s;
-webkit-animation-delay: 0.6s;
animation: glowy 0.5s;
animation-delay: 0.6s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
opacity: 0;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes glowy {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes glowy {
from {opacity: 0;}
to {opacity: 1;}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app>
<button ng-click="shrink=!shrink">Toggle Shrinking</button>
<div ng-class='{"shrinked": shrink}' id='bar'>
<div>
<span>logo1</span>
<span ng-hide='shrink' class='menu'>This is a menu.</span>
</div>
<div>
<span>logo2</span>
<span ng-hide='shrink' class='menu'>This is another menu.</span>
</div>
<div>
<span>logo3</span>
<span ng-hide='shrink' class='menu'>And one more menu.</span>
</div>
</div>
</div>
I tried to play with it using opacity animation, but the element is added right away when the ng-hide class is removed. Animating display property is not supported by browsers yet.
How do I fix this?

Answer 1

Just add white-space: nowrap; to your #bar div { … } selector.
button{
margin-bottom: 50px;
}
#bar{
background: yellow;
width: 200px;
transition: all 0.5s linear;
}
#bar div{
border: 1px solid red;
white-space: nowrap;
}
#bar.shrinked{
width: 50px;
}
#bar div span:first-child{
font-size: 75%;
}
span.menu {
width: 100px;
height: 100px;
position: relative;
-webkit-animation: glowy 0.5s;
-webkit-animation-delay: 0.6s;
animation: glowy 0.5s;
animation-delay: 0.6s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
opacity: 0;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes glowy {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes glowy {
from {opacity: 0;}
to {opacity: 1;}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app>
<button ng-click="shrink=!shrink">Toggle Shrinking</button>
<div ng-class='{"shrinked": shrink}' id='bar'>
<div>
<span>logo1</span>
<span ng-hide='shrink' class='menu'>This is a menu.</span>
</div>
<div>
<span>logo2</span>
<span ng-hide='shrink' class='menu'>This is another menu.</span>
</div>
<div>
<span>logo3</span>
<span ng-hide='shrink' class='menu'>And one more menu.</span>
</div>
</div>
</div>