Vue.js CSS 动画在使用 v-if 时无法正常工作

Question

目前，在我的 Laravel 应用程序中使用最新版本的 Vue.js。预期的结果是当用户点击一个按钮时，它会显示一个带有页面内容的div，并且会显示一个淡入淡出的动画。具体来说，我希望它做的是，当单击按钮时，页面将显示，并且每次我在页面之间切换时都会显示淡入淡出的动画。

问题

我将使用下面的示例来简化我的问题。当用户单击带有@click='productsPageBtn' 的按钮时，它会显示动画。当我单击仪表板（默认）@click='dashboardPageBtn' 时，它不会显示动画。但是当我再次点击 productsPageBtn 时，它会再次工作并再次显示动画。

它们的工作方式相同，当单击按钮时，v-if 和 :class 将添加动画类。仪表板动画在页面上首次加载时会显示，但当我从产品单击到仪表板时不显示动画。

我该如何解决这个问题，以便当我点击仪表板时，它也会显示动画而不仅仅是产品？

提前感谢您的帮助。

HTML

<div id="app">
  <button @click="dashboardPageBtn" class="">Dashboard</button>
  <button @click="productsPageBtn">Products</button>

  <div v-if="page == 'dashboard-page'" id="dashboard" class="" :class="{'content-fade-up-animation' : page == 'dashboard-page'}">
      <h1 class="top-menu-header-title">Dashboard</h1>
  </div>

  <div v-if="page == 'products-page'" id="product" class="" :class="{'content-fade-up-animation' : page == 'products-page'}">
    <div class="mt-10 text-4xl mb-10">
      <h1 class="top-menu-header-title">Test</h1>
    </div>
  </div>
</div>

JS

var app = new Vue({
  el: "#app",
  data() {
    return {
      page: "dashboard-page",
      headerTitle: "Dashboard"
    };
  },
  methods: {
    productsPageBtn(e) {


      this.page = "products-page";
      this.headerTitle = "Products";
    },

    dashboardPageBtn() {
      this.page = "dashboard-page";
      this.headerTitle = "Dashboard";
    }
  }
});

CSS

.content-fade-up-animation {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

/* Content fade up animation */

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

Answer 1

尝试如下 sn-p，使用 v-show 并在未显示时删除类 :class="page == 'dashboard-page' ? 'content-fade-up-animation' : ''"：

var app = new Vue({
  el: "#app",
  data() {
    return {
      page: "dashboard-page",
      headerTitle: "Dashboard"
    };
  },
  methods: {
    productsPageBtn() {
      this.page = "products-page";
      this.headerTitle = "Products";
    },
    dashboardPageBtn() {
      this.page = "dashboard-page";
      this.headerTitle = "Dashboard";
    }
  }
});

.content-fade-up-animation {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

/* Content fade up animation */

@keyframes fadeInUp {
  from {
    transform: translate3d(0,40px,0)
  }

  to {
    transform: translate3d(0,0,0);
    opacity: 1
  }
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0,40px,0)
  }

  to {
    transform: translate3d(0,0,0);
    opacity: 1
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="dashboardPageBtn">Dashboard</button>
  <button @click="productsPageBtn">Products</button>
  <div v-show="page == 'dashboard-page'" id="dashboard" :class="page == 'dashboard-page' ? 'content-fade-up-animation' : ''">
    <h1 class="top-menu-header-title">Dashboard</h1>
  </div>
  <div v-show="page == 'products-page'" id="product" :class="page == 'products-page' && 'content-fade-up-animation'">
    <div class="mt-10 text-4xl mb-10">
      <h1 class="top-menu-header-title">Test</h1>
    </div>
  </div>
</div>