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;