How to implement in CSS material design motion

Question

I try to respect material design guideline. But i don't know how to make this effect : Material guideline section Aware

How to simulate a smooth transformation of an element to another. Like a button to a block. I'm struggling with element positioning. Absolute positionning and the responsive design begin to be a nightmare, Relative or flex positionning and elements don't stack on each other and make animation saccaded.

Any idea? Even if is a general question, I use Angular Material framework with Flex Layout. So any solution that take care of this would be appreciate.

I dont want a library that propose all in one component. I already use angular material. I'm searching a way in css to easily handle morphing effect to make custom smooth transition between for example a round button and a sidebar shape. — Scandinave
– Scandinave, Commented Feb 11, 2017 at 16:09

vals · Accepted Answer · 2017-02-11 20:18:47Z

1

If the base layout is flex, you can do it this way

.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>

answered Feb 11, 2017 at 20:18

vals

64k11 gold badges96 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement in CSS material design motion

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related