Vue.js显示带有转换的隐藏导航

Question

www.bluecanvasdigital.co.uk具有全屏导航菜单，其中的图标淡入淡出。但是，当用户单击“十字”按钮时，从导航容器类中删除.open类时，我会朝相反的方向前进。

因此，更详细地说，图像会一张一张地淡出右边，而蓝色背景则淡出。我只能获得一种工作方式。用vuejs2和CSS有一种很好的聪明方法吗？

如果可以的话，我不想使用JS，只保留此CSS即可保存代码。

代码如下：

App.vue：-

<script>
  export default {
    name: 'App',
    data() {
      return {
        navIsActive: false
      }
    },
    methods: {
      toggleNav() {
        this.navIsActive = !this.navIsActive
      }
    }
  }
</script>
<template>
  <div id="app">
    <a href="" id="logo">
      <img src="./static/img/logo.svg" alt="logo" v-bind:class="{ hide: navIsActive }">
    </a>
    <div class="hamburger-menu" v-on:click="toggleNav" v-bind:class="{ active: navIsActive }">
      <span class="top"></span>
      <span class="middle"></span>
      <span class="bottom"></span>
    </div>
    <div id="nav-container" v-bind:class="{ open: navIsActive }">
       <p v-if="!navIsActive">hello</p>
      <nav>
        <ul>
          <li>
            <img src="./static/img/github.svg" alt="Github">
            <a href="https://github.com/maxsilvauk" target="_blank">Github</a>
          </li>
          <li>
            <img src="./static/img/behance.svg" alt="Behance">
            <a href="https://www.behance.net/bluecanvasdigital" target="_blank">Behance</a>
          </li>
          <li>
            <img src="./static/img/medium.svg" alt="Medium">
            <a href="https://medium.com/@maxsilvauk" target="_blank">Medium</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="landing-container">
      <div class="landing-title">
        <h1>Stay tuned</h1>
        <p class="landing-subtitle">website launching soon</p>
      </div>
      <vue-particles
        color="#ffffff"
        :particleOpacity="0.1"
        linesColor="#FFF"
        :particlesNumber="120"
        shapeType="circle"
        :particleSize="3"
        :linesWidth="2"
        :lineLinked="true"
        :lineOpacity="0.8"
        :linesDistance="150"
        :moveSpeed="0.8"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
    </div>
  </div>
</template>
<style lang="scss">
  @import 'src/static/styles/_global.scss';
</style>

_nav.scss：-

[@import 'src/static/styles/_hamburger.scss';
#nav-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  &.open {
    opacity: $nav-fullscreen-opacity;
    visibility: visible;
    height: 100%;
    background: $nav-fullscreen-bg;
    transition: opacity .35s, visibility .35s, height .35s;
    z-index: 101;
    li {
      animation: fadeInRight .5s ease forwards;
      animation-delay: .35s;
      margin-bottom: 36%;
      img {
        height: 75%;
        margin: 0;
      }
      &:nth-of-type(2) {
        animation-delay: .4s;
      }
      &:nth-of-type(3) {
        animation-delay: .45s;
      }
      &:nth-of-type(4) {
        img {
          margin: 0px 0px -10px 0px;
        }
        animation-delay: .50s;
        margin-bottom: 0;
      }
    }
  }
  nav {
    position: relative;
    height: 100%;
    top: 50%;
    padding-top: 4%;
    padding-bottom: 4%;
    transform: translateY(-50%);
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    @media (max-width: 767px) {
      margin-top: 6%;
      margin-bottom: 4%;
      padding: none;
    }
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: 100%;
    li {
      display: block;
      height: 25%;
      height: calc(100% / 4);
      min-height: 50px;
      position: relative;
      opacity: 0;
      a {
        display: block;
        position: relative;
        color: $nav-fullscreen-color;
        font-family: 'HalisGR-Bold', Arial, sans-serif;
        font-size: 2.5rem;
        text-transform: uppercase;
        text-decoration: none;
        overflow: hidden;
        @media (max-width: 767px) {
          font-size: 1.4rem;
        }
        &:hover:after,
        &:focus:after,
        &:active:after {
          width: 100%;
        }
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 0%;
          transform: translateX(-50%);
          height: 3px;
          background: $hamburger-link;
          transition: .35s;
        }
      }
    }
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

][1]