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设置什么。

FAB按钮动画无法正常工作

2 个答案: