speedial(actions): scale animation shown on load

[epelc]

The md-scale animation is broken on load in 1.0.0

It starts open but all the icons are tiny. It should be closed instead.

Here is a demo on codepen.

Note to get it to show on codepen I had to remove the bindings for md-direction and statically set the class to md-scale. The bug is also slightly different on codepen then in a real app. It will show the close animation when you refresh the page(clicking save/editing doesn't show it). I'd recommend running it locally outside of codepen if you can.

Tested in chrome 47.0.2526.80 m (64-bit) and 47.0.2526.106 m (64-bit) on windows 7 64 bit

@topherfangio can you look at this?

[topherfangio]

@epelc Can you please test adding ng-cloak to the speed dial (per my comment in #6111) to see if it resolves this issue as well?

Thanks!

[topherfangio]

Actually, based on the Codepen you provided, it looks like the ng-cloak doesn't resolve it. Apologies for not testing it myself.

However, it looks like the following bit of CSS should do the trick. We'll see if we can get this added in 1.0.1 to correct the issue.

.md-scale:not(.md-is-open) .md-fab-action-item {
  opacity: 0;
}

[epelc]

Just so it's noted here that css fixes it with .md-scale

[epelc]

@topherfangio you also do not need to use ng-cloak with md-scale if you add the css. But you still need it for md-fling.

Maybe some different css could fix it for md-fling so you don't have to rewrite the animations to use absolute positioning.

[topherfangio]

@epelc Indeed. And for reference, the same hack specifically does not fix it with .md-fling as that causes other problems.

[chughk1]

I tried the css workaround it fixes the issue of showing small icons but if I hover over I can still see the tooltip on the icons. Also the cursor changes to a pointer as if you can click on a button. If needed I can provide a plunkr for reproducing the issue.

[topherfangio]

@chughk1 Try the following temporary fix:

.md-scale:not(.md-is-open) .md-fab-action-item {
    opacity: 0;
    transform: scale(0);
}

I'm hoping to add this soon to the standard CSS, but I need to test it a bit more first.

[chughk1]

@topherfangio That didn't fix the issue.

[topherfangio]

@chughk1 Apologies. I dug into it a bit more and the JS is actually setting this as a style during the animation, so the CSS override I suggested simply wouldn't apply.

I have a PR (#6786) which should fix this.

Any chance you could test my changes real fast and provide feedback?

[epelc]

@topherfangio I just tested after removing your other css fix from above and it works :)

Also just to clarify this is for the md-scale animation right? I put md-slide in the issue for some reason. I don't remember if it was renamed or not.

[topherfangio]

@epelc Thanks for testing!

Indeed, it is md-scale, not md-slide. I'll update the text 😄

[chughk1]

@topherfangio Sorry. Didn't see your message earlier. I will also try the fix and see if it works for me.

[wishabhilash]

Hi guys, this worked for me...

<md-fab-speed-dial md-direction="{{editorControl.dialerDirecton}}" class="md-fling md-fab-bottom-right">

Put the ng-class atribute content inside the class. No ng-cloak required or ng-open itself.