幻灯片动画不起作用

Question

在这个 Vue 组件中，我尝试制作幻灯片。

逻辑是这样运作的：

1) 制作我要放入的所有图片来源的数组（数组：图片）

2) 将variable(Count) 设置为0，使其从头开始。

3) 将v-bind:src="pictures[count]" 放在img 标记上，以便通过变量（计数）更改源

4) 将功能放在图像中返回或图像中前进的 2 个按钮上。

<template>
  <div>
    <img v-bind:src="pictures[count]" alt="">
    <button @click="Switching(1)">Forward</button>
    <button @click="Switching(-1)">Back</button>
    <p>{{this.count + 1}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      pictures: [
        "http://www.hotel-bb.com/image.htm?id=93652",
        "https://s-ec.bstatic.com/images/hotel/max1280x900/681/68184730.jpg",
        "https://images.all-free-download.com/images/graphiclarge/hd_picture_of_the_beautiful_natural_scenery_03_166249.jpg",
        "https://images.all-free-download.com/images/graphiclarge/the_beach_at_dusk_couple_of_picture_165871.jpg"
      ],
      stop: false
    };
  },
  methods: {
    Switching: function(n) {
      this.count += n;
      if (this.count > this.pictures.length - 1) {
        this.count = 0;
      } else if (this.count < 0) {
        this.count = this.pictures.length - 1;
      }
    }
  }
};
</script>
<style scoped>
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
img {
  max-width: 800px;
  height: 500px;
  animation: 1s ease-out 0s 1 slideInFromLeft;
}
</style>

它工作正常。问题是，当我在上面放动画时，除了加载的第一张图片外，它不起作用，当我通过两个按钮切换时，图片没有动画效果。

我尝试了transition: 0.5s、animation 和Keyframes，但没有任何效果。我猜这是因为图片没有出现，但它们被加载并且 src 被改变。我怎样才能让它发挥作用？

Answer 1

对于在 Vue JS 上构建幻灯片，我建议 Vueper Slides。它会为你做这一切。

除非是为了学习。