vue.js - 如何在 Gridsome 中处理过渡和动画

Question

目前我一直在VueJS的内联CDN版本中使用此代码，它工作正常，但是当我将它添加到gridsome时，动画上的单击事件以打开幻灯片不起作用。

我查看了页面输入的动画正在工作，但我不确定如何处理组件动画。

动画在 Gridsome 中有效吗？

    <template>
  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <div class="row">
      <div class="col">
        <button
          @click="show = !show"
          class="navbar-toggler"
          type="button"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="col">
        <a class="navbar-brand" href="/">Navbar</a>
      </div>
    </div>
    <div>
      <transition name="slidein">
        <div v-if="show" class="nav-bar">
          <button
            @click="show = !show"
            class="btn-close pl-4 p-3"
            type="button"
          ></button>
          <span class="close-btn">X</span>
          <div class="d-flex flex-column"></div>
        </div>
      </transition>

      <transition name="fadein">
        <div v-if="show = show" class="bck-close" @click="show = !show"></div>
      </transition>
    </div>
  </nav>
</template>
<script>
export default {
  name: "headNav",
  data: {
    show: false
  },
};
</script>

<style>
.nav-bar {
  height: 100vh;
  width: 80vw;
  background: #fff;
  position: absolute;
  left: 0;
  z-index: 10000;
  overflow-x: hidden;
  overflow-y: auto;
  top: 0;
}

.btn-close {
  background: none;
  border: none;
  font-size: 1em;
}

.bck-close {
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 1);
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  opacity: 0.1;
  cursor: pointer;
}

.slidein-enter-active {
  animation: slidein 0.2s;
}
.slidein-leave-active {
  animation: slidein 0.2s reverse;
}
@keyframes slidein {
  from {
    left: -100%;
    width: 0%;
  }

  to {
    left: 0;
    width: 80vw;
  }
}

.fadein-enter-active {
  animation: fadein 0.2s;
}
.fadein-leave-active {
  animation: fadein 0.2s reverse;
}
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.1;
  }
}
</style>

Answer 1

数据部分有误，动画确实有效！

<script>
    export default {
      name: "headNav",
      data () {
          return {
            show: false
        }
      },
    };
</script>