CODEWITHSUNDEEP
cssbuttoncss-animationsfloating-action-button
celsomtrindade
celsomtrindade

Reputation: 4671

FAB button animation not working properly

I'm trying to animate a FAB button when it's clicked. I want it to open and fills up the screen - It's for a responsive webApp running in mobile devices.

The problem is: When I click to open the button, it gets the full width instantly and then animate up. And to close the button, it shorten instantly and then animate down.

The problem is I'm using a fixed position, so I don't know how to deal with it.

This is an code example:

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%;
    }
}

And this is an live demo of the problem: http://jsfiddle.net/tfrxf0p5/

Upvotes: 0

Views: 395

Answers (2)

celsomtrindade
celsomtrindade

Reputation: 4671

A workaround to fix the issue I had was to use a width:calc; and doesn't use the left property.

This way I can calculate the maximum width of the element based on the distance of the border. So, since I already have a position right of 16px I need to have a width of 100% minus 16px for each side.

Final code would be something like this:

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

Upvotes: 1

JordyvD
JordyvD

Reputation: 1615

I can't fix the fiddle on my phone for some reason. you have transition-duration but you never set what to transition.

Upvotes: 0

Related Questions