Как исчезать с Vue - PullRequest
Новая
       20

Как исчезать с Vue

0 голосов
/ 14 марта 2019

Мне нужна помощь с анимацией с помощью Vue. У меня есть уведомление, которое отображается только при наличии сообщения в состоянии (this.$store.state.message), поэтому у меня есть элемент уведомления, подобный этому 

<!-- This is the notification -->
    <template v-if="this.$store.state.status">
        <div
          class="login-toastr login-success show-login-toastr"
          v-if="this.$store.state.status == 'success'"
        >
          <p>{{ this.$store.state.message }}</p>
        </div>

        <div class="login-toastr login-failed" v-else-if="this.$store.state.status !== 'success'">
          <p>{{ this.$store.state.message }}</p>
        </div>
    </template>

Дело в том, что я хочу, чтобы уведомление появлялось и исчезало, а когда оно исчезает, пусть сообщение и статус становятся пустыми.Пожалуйста, как мне это сделать?

Я уже что-то пробовал, но это не работает 

<template>
  <div id="app">
    <!-- This is the notification -->
    <template v-if="this.$store.state.status">
      <transition name="fade">
        <div
          class="login-toastr login-success show-login-toastr"
          v-if="this.$store.state.status == 'success'"
        >
          <p>{{ this.$store.state.message }}</p>
        </div>

        <div class="login-toastr login-failed" v-else>
          <!-- <div class="login-toastr login-failed" v-else-if="this.$store.state.status !== 'success'"> -->
          <p>{{ this.$store.state.message }}</p>
        </div>
      </transition>
    </template>
  </div>
</template>

<script>
export default {};
</script>

<style>
.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity 1s;
}

.fade-leave {
  /* opacity: 0; */
}

.fade-leave-active {
  transition: opacity 1s;
  opacity: 0;
}
</style>

Кроме того, я использую jQuery, так что если у вас есть предложения по этому поводу.

...