FAB按鈕動畫無法正常工作

我試圖在單擊FAB按鈕時激活它。我希望它打開並填滿屏幕 - 這是一個在移動設備上運行的響應式webApp。FAB按鈕動畫無法正常工作

問題是：當我點擊打開按鈕時，它立即獲得全寬，然後動畫。要關閉按鈕，它會立即縮短然後生成動畫。

問題是我使用固定的位置，所以我不知道如何處理它。

這是一個代碼示例：

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/

來源

2016-01-21 celsomtrindade

什麼願望？以相等的間隔擴大高度和寬度？ – leigero

@leigero不需要完全完美。但正如你可以在演示中看到的那樣，當打開時，寬度無需動畫即可獲得全角色，關閉時也是如此。我希望它是平穩的，不要突然！ – celsomtrindade

解決我遇到的問題的解決方法是使用width:calc;並且不使用left屬性。

這樣我就可以根據邊框的距離來計算元素的最大寬度。所以，因爲我已經擁有一個16px的位置，所以我需要爲每一邊都設置100％減去16px的寬度。

最終代碼會是這樣的：

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

來源

2016-01-21 11:30:16 celsomtrindade

請發表小提琴。 – g3mini

@ g3mini http://jsfiddle.net/tfrxf0p5/3/這裏。 – celsomtrindade

雖然它不適用於所有的瀏覽器，但我仍然會給你一個upvote，因爲這段代碼簡單而有效。雖然可能不想忘記供應商前綴。 – g3mini

我可以」 t出於某種原因將手機上的小提琴固定在手機上。你有transition-duration，但你從來沒有設置transition。

來源

2016-01-21 00:24:11 g3mini

沒有明白你說的。你的意思是定義'transition-property'？因爲有一些屬性會發生變化，比如寬度，高度，顏色，背景等等。 – celsomtrindade

你從來沒有設置過渡屬性，更不用提「自動」不能動畫 – g3mini

那麼我該如何解決呢？ – celsomtrindade

FAB按鈕動畫無法正常工作

回答

相關問題