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>

scss:

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

Answer 2

由于某种原因，我无法修复手机上的小提琴。你有transition-duration，但你从来没有设置过transition。