Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 7e7ac8f

Browse files
topherfangioThomasBurleson
authored andcommitted
fix(speedDial): Ensure scale animation actions are invisible when closed.
When using the `scale` animation, the FAB Speed Dial's action items could sometimes appear as small dots on the screen even when the component was closed. This was due to an old bug where closing a dialog from a hidden action item was throwing an issue. This has since been fixed so we can revert this back to the original code that used `scale(0)` instead of `scale(0.1)` which ensured that the dialog always had a button to animate to when closing. Also fix an issue with the `ng-hide` animation in the "More Options" demo. Fixes #6344. Fixes #6670. Closes #6786
1 parent 8ccb518 commit 7e7ac8f

File tree

3 files changed

+5
-3
lines changed

3 files changed

+5
-3
lines changed

src/components/fabSpeedDial/demoMoreOptions/style.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,12 @@ md-fab-speed-dial {
4141

4242
// Note: you MUST use an existing CSS class for the animation to fire properly
4343
&.md-scale, &.md-fling {
44-
&.ng-hide {
44+
&.ng-hide-add.ng-hide-add-active {
4545
// Use !important to override ng-hide's `display: none !important`
4646
display: flex !important;
47+
}
4748

49+
&.ng-hide {
4850
md-fab-trigger {
4951
transform: scale(0);
5052
}

src/components/fabSpeedDial/fabSpeedDial.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@
223223
offsetDelay = index * delay;
224224

225225
styles.opacity = ctrl.isOpen ? 1 : 0;
226-
styles.transform = styles.webkitTransform = ctrl.isOpen ? 'scale(1)' : 'scale(0.1)';
226+
styles.transform = styles.webkitTransform = ctrl.isOpen ? 'scale(1)' : 'scale(0)';
227227
styles.transitionDelay = (ctrl.isOpen ? offsetDelay : (items.length - offsetDelay)) + 'ms';
228228

229229
// Make the items closest to the trigger have the highest z-index

src/components/fabSpeedDial/fabSpeedDial.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ md-fab-speed-dial {
134134

135135
&.md-scale {
136136
.md-fab-action-item {
137-
transform: scale(0.1);
137+
transform: scale(0);
138138
transition: $swift-ease-in;
139139

140140
// Make the scale animation a bit faster since we are delaying each item

0 commit comments

Comments
 (0)