Wie in CSS Material Design Bewegung implementieren

Question

Ich versuche, Material Design-Richtlinie zu respektieren. Aber ich weiß nicht, wie man diesen Effekt machen: Material guideline section Aware

Wie eine glatte Umwandlung eines Elements zu einem anderen zu simulieren. Wie ein Knopf zu einem Block. Ich kämpfe mit der Elementpositionierung. Absolute Positionierung und das responsive Design beginnen, ein Albtraum zu sein, Relative oder Flex-Positionierung und Elemente stapeln sich nicht aufeinander und machen die Animation sakkadiert.

Irgendeine Idee? Auch wenn es sich um eine allgemeine Frage handelt, verwende ich das Angular Material Framework mit Flex Layout. Also jede Lösung, die sich darum kümmert, wäre zu schätzen.

Answer 1

Wenn das Basislayout flex ist, können Sie es auf diese Weise tun

.container { 
 
    width: 600px; 
 
    height: 300px; 
 
    position: relative; 
 
    border: solid 1px green; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    pointer-events: none; 
 
} 
 
.button { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: teal; 
 
    border-radius: 50%; 
 
    transition: all 1s; 
 
    pointer-events: auto; 
 
} 
 
.container .button:hover { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 0%; 
 
    opacity: 1; 
 
} 
 
.container:hover div { 
 
    width: 0%; 
 
    height: 0%; 
 
    opacity: 0; 
 
}

<div class="container"> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
</div>