css - 用于缩小侧边栏的 CSS 动画和 ng-hide 问题

Question

我有一个可以缩小的边栏。缩小时，只有相应的 Logo 可见。

问题在于收缩/取消收缩动画不正确 - 在取消收缩时，当“ng-hide”未激活时(正在显示元素)，它会进入下一行，因为它无法适应可用宽度。而with动画完成后，就适配了。如您所知，这不是一个好的用户体验。

这是我的问题的演示:

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 { … } 选择器。

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>