如何使用Vue淡入淡出

Question

我需要有关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，所以如果对此也有建议的话。