logo标签列表

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

javascriptvue.jsanimationvuejs2
3

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

问题

我将使用下面的示例来简化我的问题。当用户点击具有@click='productsPageBtn'的按钮时，它会显示动画效果。但是，当我点击仪表盘(默认)@click='dashboardPageBtn'时，它不会显示动画效果。但是，当我再次点击productsPageBtn时，它又能起作用并再次显示动画效果。

它们都以相同的方式工作，使用v-if和:class，当单击按钮时，它将添加动画类。当dashboard首先加载到页面上时，仪表板动画确实会显示，但当我从产品切换到仪表板时，动画就不会显示。

我该如何修复这个问题，使得当我点击dashboard时，它也会显示动画效果，而不仅仅是products？

非常感谢您提供的任何帮助。

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
    }
}
为什么你在 div 上声明了两个类属性（class 和 :class）？ - David
我意识到:class是不必要的，只需添加普通类即可达到相同效果。 - n212
1个回答
3
尝试使用以下代码片段，使用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>

谢谢！这正是我在寻找的。 - n212
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接