Как обрабатывать переходы и анимацию в Gridsome - PullRequest
Новая
       12

Как обрабатывать переходы и анимацию в Gridsome

0 голосов
/ 30 октября 2019

В настоящее время я использую этот код во встроенной версии VueJS для CDN, и он работает нормально, но когда я добавляю его в гридсом, событие щелчка на анимации, чтобы открыть слайд, не работает.

Я посмотрел, что анимации для ввода страницы работают, но я не уверен, как обрабатывать анимации компонентов.

Работают ли анимации в 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>

1 Ответ

0 голосов
/ 30 октября 2019

Неправильная часть данных, анимации работают! 

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