React용 Material UI 로 구현할 수 있는 버튼 누를 때의 이펙트.



클릭 한 지점에서 파문이 펼쳐지는 애니메이션을보고

이것은 꼭 구현하고 싶다!

생각했기 때문에 시도했습니다.

만든 것

코드는 이쪽
CodeSandBox

button 구조

여기

<button class="base-root">
  <span class="label">button</span>
  <span class="ripple-root">
    // ↓buttonのmousedownで生成↓
    <span class="ripple-ripple ripple-rippleVisible">
      <span class="ripple-child ripple-childLeaving"></span>
    </span>
  </span>
</button>

class명은 본가와 조금 바꾸었지만 대체로 이런 느낌
ripple-childLeaving 는 mouseup시에 붙는 것 같은

ripple-ripple의 크기

ripple의 크기를 살펴보면
본가는 삼평방의 정리적인 사무신구를 사용하여 좋은 정사각형을 만들고 있는 것 같지만
귀찮아서 적당히 base-root의 두 배로 해보자.

생각했지만 보통 반경을 찾았습니다.

// calculation
const rootWidth = rippleRoot.clientWidth;// buttonの幅
const rootHeight = rippleRoot.clientHeight;// buttonの高さ
const radius = Math.sqrt(Math.pow(rootWidth, 2) + Math.pow(rootHeight, 2));// 円の半径
const top = e.layerY - radius;
const left = e.layerX - radius;
rippleRipple.style.width = `${radius * 2}px`;
rippleRipple.style.height = `${radius * 2}px`;
rippleRipple.style.top = `${top}px`;
rippleRipple.style.left = `${left}px`;

이제 클릭 한 지점을 중심으로 한 요소를 만들 수 있습니다.

DOM 조작

에 대해 아무것도 말하지 않습니다.

코드를 봐주세요.

문제점

연속으로 클릭하면 버튼이 흰색이됩니다.

본가

모방

그래서 해결책을 아는 사람을 알려주세요 m (__) m

pulsate를 결국 사용하지 않았다.

본가의 코드나 css에 때때로 **-pulsate 라는 문자열이 있어,
keyframe도 설정되었기 때문에 어딘가에서 사용하지 않을까 생각했습니다.
결국 사용하지 않았다.
이쪽도 어디에서 사용하는지 아는 사람이라면 가르쳐 (ry

덧붙여서 pulsate란