Rotate and transform paper-fab icon

[dominik0711]

It would be nice to transform paper-fab icon from one image (in closed state) to another (in opened state).

So for example from closed state

to opened state

[pomber]

To support this, maybe we could add a class to the trigger element every time the menu is open and remove the class when the menu is closed. That way anyone can add a css transition, for this case a rotate(45deg) should be enough.
What do you think?

[dominik0711]

This seems to be a good solution for the example above. But how do you support other kind of image/icon animations? Is a css class sufficient for all kind of animations? E.g. morphing, rotating single lines instead of the whole icon etc.?

[dominik0711]

Could you please expose the animation duration property as well? Thanks

[dominik0711]

@pomber To add a class to the element seems to be not sufficient to do the CSS rotate transformation due to the fact that there are 3 paper-fab states:

1. Initial (no transformation needed)
2. opened (rotate(45deg) animation)
3. closed (rotate(-45deg) animation back to initial state)

Am I wrong? I'll tried to use the property active in paper-fab-speed-dialg but without success.

This is my CSS transition code:

paper-fab-speed-dial[active] > paper-fab {
        transition:all 400ms ease-in-out;
        -webkit-transition:all 400ms ease-in-out;
        -moz-transition:all 400ms ease-in-out;
        -o-transition:all 400ms ease-in-out;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
}

The problem seems to be the close animation where the rotate(-45deg) transition have to be made.

(After the menu hides the paper-fab-speed-dialer returns to the initial state without animation because I have no CSS selector to create a transistion rotation back to the initial state)

I think the best way would be a function trigger/call either on neon-animation-start or on neon-animation-finish to let the user implement additional animations if needed.
What do you think?

[bennypowers]

take a look at https://www.webcomponents.org/element/Pupix/adaptive-icon for inspiration

[bennypowers]

sorry wrong repo (although that one is cool too)

look at this: https://www.webcomponents.org/element/hotforfeature/delightful-icons