paper-fab icon indicating copy to clipboard operation
paper-fab copied to clipboard

Include Basic Show/Hide Functionality

Open JamesCoyle opened this issue 8 years ago • 0 comments

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.

JamesCoyle avatar Apr 02 '17 19:04 JamesCoyle