javascript - 幻灯片的动画不起作用

Question

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

逻辑是这样的:

1)制作一个我要放入的所有图片来源的数组(array: pictures)

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 .它会为您完成这一切。

除非是为了学习目的。