ant-design-blazor/components/menu/AntSubMenu.less

@menuPrefixCls: ant-menu;

:root .ant-menu-submenu.ant-menu-submenu-placement-bottomLeft {
  top: 6px;
  position: relative;
}

:root .ant-menu-submenu.ant-menu-submenu-placement-rightTop {
  left: 4px;
  position: relative;
}

:root .ant-menu-submenu.ant-menu-submenu-placement-leftTop {
  right: 4px;
  position: relative;
}

.@{menuPrefixCls} {
  &-submenu {
    &-popup {
      position: absolute;

      .submenu-title-wrapper {
        padding-right: 20px;
      }
    }

    > .@{menuPrefixCls} {
      background-color: #fff;
    }
  }

  .effect() {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    transform-origin: 0 0;
  }

  &-open {
    &-slide-up-enter,
    &-slide-up-appear {
      .effect();
      opacity: 0;
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
      animation-play-state: paused;
    }

    &-slide-up-leave {
      .effect();
      opacity: 1;
      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
      animation-play-state: paused;
    }

    &-slide-up-enter&-slide-up-enter-active,
    &-slide-up-appear&-slide-up-appear-active {
      animation-name: antMenuOpenSlideUpIn;
      animation-play-state: running;
    }

    &-slide-up-leave&-slide-up-leave-active {
      animation-name: antMenuOpenSlideUpOut;
      animation-play-state: running;
    }

    @keyframes antMenuOpenSlideUpIn {
      0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(0);
      }

      100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
      }
    }

    @keyframes antMenuOpenSlideUpOut {
      0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
      }

      100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(0);
      }
    }

    &-zoom-enter,
    &-zoom-appear {
      opacity: 0;
      .effect();
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
      animation-play-state: paused;
    }

    &-zoom-leave {
      .effect();
      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
      animation-play-state: paused;
    }

    &-zoom-enter&-zoom-enter-active,
    &-zoom-appear&-zoom-appear-active {
      animation-name: antMenuOpenZoomIn;
      animation-play-state: running;
    }

    &-zoom-leave&-zoom-leave-active {
      animation-name: antMenuOpenZoomOut;
      animation-play-state: running;
    }

    @keyframes antMenuOpenZoomIn {
      0% {
        opacity: 0;
        transform: scale(0, 0);
      }

      100% {
        opacity: 1;
        transform: scale(1, 1);
      }
    }

    @keyframes antMenuOpenZoomOut {
      0% {
        transform: scale(1, 1);
      }

      100% {
        opacity: 0;
        transform: scale(0, 0);
      }
    }
  }
}