md-fab-speed-dial: does not animate the first time

In angular-material v0.10.0, the md-fab-speed-dial component does not animate the first time it is hovered or touched. The embedded example on https://material.angularjs.org/latest/#/demo/material.components.fabSpeedDial works properly, but the supplied CodePen has the same issue. This occurs in Chrome 43 and Internet Explorer 11. I have not tested other browsers.

When the action buttons are hidden, the .md-fab-action-item does not have its transform property set before it is activated. After it has been activated, it has. The embedded example has its transform property set before it is even opened for the first time, so that might be what's going wrong.

[ryanstrandt]

I am having the same problem. Is there something else we are missing.

[ryanstrandt]

I looked again and realized that I did not update my css file when I updated the script to 0.10. Once I added 0.10 of the css file as well then it worked for me.

Good to hear! This did not fix it for me though, I'm still having the same issue.

[topherfangio]

Hi guys, I will take a look and see if I can figure this out. I had experienced this a few times in the past, but I thought it was an issue with the automatic browser reload I was using because I could refresh the page and it went away. Perhaps it is a timing/initialization issue.

Great, thanks!

[ronycohen]

Hello,

I'm having the same issue currently. (angular-material "version": "1.0.6")
the md-fab-speed-dial component does not animate the first time it is hovered or touched.
Would you please tell me what I missed ?

 <link rel="stylesheet" href="lib/angular-material/angular-material.min.css">

 <!--Version 1.4.3-->
    <script src="lib/angular-animate/angular-animate.min.js"></script>
    <script src="lib/angular-aria/angular-aria.min.js"></script>
    <script src="lib/angular-messages/angular-messages.min.js"></script>

 <!--Version 1.0.6-->
    <script src="lib/angular-material/angular-material.min.js"></script>

 <md-fab-speed-dial md-open="fab.isOpen" md-direction="up"
                           class="md-fab-bottom-right md-scale" >
            <md-fab-trigger>
                <md-button aria-label="menu" class="md-fab md-warn">
                    <md-icon md-font-icon="fa-users" class="fa fab-button"></md-icon>
                </md-button>
            </md-fab-trigger>

            <md-fab-actions>
                <md-button ng-click="action()" class="md-raised light-bg">
                    TEST1
                </md-button>
                <md-button  ng-click="action()"
                            class="md-raised">
                    TEST2

                </md-button>
                <md-button  ng-click="action()"
                            class="md-raised">
                    TEST3

                </md-button>
                <md-button  ng-click="action()"
                            class="md-raised">
                    TEST4

                </md-button>

            </md-fab-actions>

        </md-fab-speed-dial>