界面结构

file:MenuList.vue/template
<div
  class="transition-all-300 fixed-lt w-70 h-100vh z-90 bg-b1"
  :class="{ 'close-menu-body': !isActiveMenu, 'open-menu-body': isActiveMenu }">
  <div class="flow-auto select-none scroll-none h-100% mt-30">
    <div class="menu-list ml-10">
      <div class="hover mb-10 font-art" @click="Broswer.scrollIntoView('#l-top-nail')">
        回到顶部
      </div>
      <div class="hover mb-10 font-art" @click="Broswer.scrollIntoView('#tags-nail')">
        我的标签
      </div>
      <div class="hover mb-10 font-art" @click="Broswer.scrollIntoView('#essay-nail')">
        随笔分类
      </div>
      <div class="hover mb-10 font-art" @click="Broswer.scrollIntoView('#article-nail')">
        文章分类
      </div>
      <div
        class="hover mb-10 font-art"
        @click="Broswer.scrollIntoView('#essay-archive-nail')">
        随笔归档
      </div>
      <div
        class="hover mb-10 font-art"
        @click="Broswer.scrollIntoView('#article-archive-nail')">
        文章归档
      </div>
      <div class="hover mb-10 font-art" @click="Broswer.scrollIntoView('#my-pohoto-nail')">
        我的相册
      </div>
      <div
        class="hover mb-10 font-art"
        @click="$router.push(RouterPath.ArbeitenByCalendar())">
        我的日历
      </div>
    </div>
  </div>
</div>

这里通过一个布尔变量控制 class close-menu-body 和 open-menu-body 之间的切换。

这里所用到的其余 class，比如 transition-all-300 是 UnoCSS 的预设值。详情查阅交互式文档UnoCSS Interactive Docs。

Scss

file:MenuList.vue/scoped scss
.close-menu-body {
  left: -17.5rem;

  .menu-list > div {
    opacity: 0;
  }
}

.open-menu-body {
  left: 0;

  @for $i from 0 to 9 {
    .menu-list > div:nth-child(#{$i}) {
      opacity: 1;
      transition-delay: #{$i * 0.06}s !important;
    }
  }
}

给每一个 div 逐一设置一个逐增的 transition-delay，即让由 opacity0 到 opacity1 的过渡动画播放的延时。

效果