CSS动画问题和ng-hide缩小侧边栏

Question

我有一个可以收缩的侧边栏。在收缩时，只能看到相应的徽标。

它的问题在于收缩/不收缩动画是不正确的 - 在取消隐藏时，当'ng-hide'未激活（显示元素）时，它会进入下一行，因为它无法适应可用的宽度。动画完成后，它适合。如你所知，这不是一个好的用户体验。

以下是我的问题演示：

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>

我尝试使用不透明度动画来播放它，但是当删除ng-hide类时，会立即添加该元素。浏览器尚不支持动画显示属性。

我该如何解决这个问题？

Answer 1

只需将white-space: nowrap;添加到#bar div { … }选择器即可。

＆＃13;

＆＃13;

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;}
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;