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

Question

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

问题

我将使用下面的例子来简化我的问题。当用户用@click='productsPageBtn'点击按钮时，它会显示动画。当我单击面板(默认)@click='dashboardPageBtn'时，它不会显示动画。但当我点击产品时，PageBtn再次工作，并再次显示动画。

它们的工作方式相同，使用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

尝试如下片段，使用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>