css - FAB button animation not working properly -

i'm trying animate fab button when it's clicked. want open , fills screen - it's responsive webapp running in mobile devices.

the problem is: when click open button, gets full width instantly , animate up. , close button, shorten instantly , animate down.

the problem i'm using fixed position, don't know how deal it.

this code example:

html:

<div class="fab" ng-class="{'open': fabopen}" ng-click="togglefab()">     <span ng-show="!fabopen">fab</span>     <h4 ng-show="fabopen">just 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 live demo of problem: http://jsfiddle.net/tfrxf0p5/

a workaround fix issue had use width:calc; , doesn't use left property.

this way can calculate maximum width of element based on distance of border. so, since have position right of 16px need have width of 100% minus 16px each side.

final code this:

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