paper-fab
paper-fab copied to clipboard
Include Basic Show/Hide Functionality
It would be great if the FAB implemented a basic scale animation for show and hide. The material design specification states an FAB should animate onto the screen as a growing piece of material. To me this seems like core functionality of an FAB and should be included.
A simple boolean attribute hidden could be added so it is easy to programmatically show and hide the FAB. The animation could be a simple CSS scale transition from 0 to 1.
Required code changes (I think? Not entirely sure where the animated property is coming from):
:host() {
transform: scale(1);
}
:host([animated]) {
// prevent animation on initial state
transition: transform 175ms;
}
:host([hidden]) {
transform: scale(0);
}
properties: {
hidden: {
type: Boolean,
reflectToAttribute: true
}
},
Could also add a property to allow it to show itself when attached to the DOM.