Zenn
Open1

transition animation

ShumpeiShumpei

メニューラベルにホバーした時にふわっと表示して、ホバーが外れたときはふわっと消えるようにする。

CSS

.animated-element {
    opacity: 0;
    transform: translateY(0.25rem);
    visibility: hidden;
    transition: visibility 0s 200ms;
  }

  .animated-element.custom-visible {
    animation: fadeIn 200ms ease-out forwards;
    visibility: visible;
    transition: visibility 0s;
  }

  .animated-element.custom-hidden {
    animation: fadeOut 200ms ease-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(0.25rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(0.25rem);
    }
  }

JS

メニューラベルだけでなく、メニュー内部を選択中も表示しなくてはいけないのが注意。

/**
   * サービス一覧メニューのマウスオーバーイベント
   */
  const servicesContainer = document.getElementById('servicesContainer')
  const servicesInner = document.getElementById('servicesInner')

  /**
   * ナビゲーションの表示トランジション
   */

  function enter() {
    servicesInner?.classList.remove('custom-hidden');
    servicesInner?.classList.add('custom-visible');
  }

  function leave() {
    servicesInner?.classList.remove('custom-visible');
    servicesInner?.classList.add('custom-hidden');
  }

  servicesContainer?.addEventListener('mouseenter', () => {
    enter()
  })

  servicesContainer?.addEventListener('mouseleave', () => {
    leave()
  })

  servicesInner?.addEventListener('mouseenter', () => {
    enter()
  })

  servicesInner?.addEventListener('mouseleave', () => {
    leave()
  })

HTML

<div id="servicesContainer" class="relative text-[12px] duration-200 tracking-wide group py-10 hover:cursor-pointer hover:text-gray">
      <div class="flex items-center gap-2">
        <a class="font-sans font-semibold hover:text-gray transition-colors duration-200 tracking-wide hover:text-gray text-sm">
          サービス一覧
        </a>
    <img src="/public/images/arrow-down-black.svg" alt="矢印アイコン" class="w-5 h-5" />    
  </div>
</div>

.................

<div id="servicesInner"
  style={"right: 480px;"}
  class="animated-element absolute top-[106px] shadow-lg z-10 bg-white px-6 py-5 rounded-xl w-full max-w-[800px] "
>
<!-- メニュー内部 -->
</div>