css - FAB 按钮动画无法正常工作

Question

我正在尝试在单击 FAB 按钮时对其进行动画处理。我希望它打开并填满屏幕 - 它适用于在移动设备上运行的响应式 webApp。

问题是:当我点击打开按钮时，它会立即获得全宽然后动画化。要关闭按钮，它会立即缩短，然后向下动画。

问题是我使用的是固定位置，所以我不知道如何处理它。

这是一个代码示例:

html:

<div class="fab" ng-class="{'open': fabOpen}" ng-click="toggleFab()">
    <span ng-show="!fabOpen">FAB</span>
    <h4 ng-show="fabOpen">Just a test</h4>
</div>

CSS:

$time: 400ms;
.fab {
    -webkit-transition-duration:    $time;
    -moz-transition-duration:       $time;
    -o-transition-duration:         $time;
    transition-duration:            $time;

    border-radius:50%;
    background:#358FE8;
    display:inline-block;
    height:80px;
    line-height:80px;
    width:80px;
    position:fixed;
    bottom:16px;
    right:16px;
    text-align:center;
    cursor:pointer;
    color:white;
    &.open {
        background:#fff;
        color:black;
        border:1px solid #eee;
        border-radius:2px;
        left: 16px;
        width:auto;
        height:90%;
    }
}

这是问题的现场演示:http://jsfiddle.net/tfrxf0p5/

Answer 1

解决我遇到的问题的解决方法是使用 width:calc; 并且不使用 left 属性。

这样我就可以根据边框的距离计算出元素的最大宽度。所以，因为我已经有了 16px 的位置，所以我需要每边的宽度为 100% 减去 16px。

最终代码应该是这样的:

&.open {
    width:calc(100% - 32px);
    /*left:16px;*/ //Doesn't need it
}