Vue.js CSS animation not working correctly when using v-if-CodePudding

Currently, using the latest version of Vue.js in my Laravel application. The expected result is when the user click on a button, it will show a certain div with the page content, and it will show a fade up animation. Specifically, what I want it to do, is when a button is clicked, the page will show and a fade-up animation will show every time I switch between pages.

The problem

I'll use the example below to simplify my problem. When the user clicks on the button with the @click='productsPageBtn' it shows the animation. When I click on the dashboard (the default) @click='dashboardPageBtn' it does not show the animation. But when I click back on the productsPageBtn is does work again and shows the animation again.

They both work in the same way, with a v-if and a :class when the button is clicked, it will add the animation class. The dashboard animation does show when it's loaded first on the page, but does not show the animation when I click from products to dashboard.

How am I able to fix this so that when I click on dashboard, it will also show the animation instead of just products?

Thank you in advance for any help.

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>

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
    }
}

CodePudding user response：

Try like following snippet, with v-show and removing class when not shown :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>