Как сделать кнопку с дизайном материала

Question

Как сделать кнопку, как в Topeka? Он также должен скрываться при анимации родителя.

Answer 1

Используйте этот CSS:

:host(:not([animate])) paper-fab { 
transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1) 500ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1); 
transform: scale(1); 
transform-origin: 50% 50%; 
} 
:host([animate]) paper-fab { 
visibility: hidden; 
transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1) 500ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1); 
transform: scale(0); 
transform-origin: 50% 50%; 
}