javascript - 我如何为这个幻灯片制作动画（通过更改它的 src）？

Question

好的好的，所以在将这篇文章标记为重复之前。让我给你解释一下：

我制作了一个幻灯片，每次按下按钮时它都会通过在一个对象中javascript(Vue)更改它来工作（下一个）src

它可以工作，但问题是无论我做什么，它都不会动画，我对它们进行了转换，在其上设置了超时功能......等等，即使是最小的也没有任何效果。

我本可以提出另一个想法，该想法适用于绝对位置，但我不想这样做，因为这会花费大量时间，而且由于绝对位置会破坏它，所以它会非常麻烦。所以有什么帮助吗？

<template>
  <main>
    <div id="slideshow">
      <figure id="pics">
        <img id="slidepic" v-bind:src="pictures[count].src">
        <figcaption>{{pictures[count].alt}}</figcaption>
      </figure>
    </div>
    <p>{{count+1}}/{{pictures.length}}</p>
    <div id="controls">
      <div @click="move(-1)">Previous</div>
      <div @click="move(1)">Next</div>
    </div>
  </main>

Javascript：

  methods: {
    move: function(num) {
      let slideimg = document.querySelector("#slidepic");
      slideimg.classList.add("fadeOut");
      this.count += num;
      if (this.count < 0) {
        this.count = this.pictures.length - 1;
      } else if (this.count >= this.pictures.length) {
        this.count = 0;
      }
      setTimeout(function() {
        slideimg.src = this.pictures[1].src;
      }, 1000);
    }
  }

CSS：

#pics {
  opacity: 0.5s;
  transition: 0.5s;
}
#pics.fadeOut {
  opacity: 1;
}

我没有包含对象（即在数据对象中，在 中的东西Vue），因为在这种情况下它是无用的。

标签： javascripthtmlcssvue.js

Answer 1

首先，它是transition: <property-name> 0.5s linear;而不是transition: 0.5s;。请参阅过渡文档。

没有用于更改图像 src 的动画（请参阅动画 css 属性列表）。

要执行此类操作，您可以将所有图像堆叠到一个元素中，然后使用 css 动画和 transform 属性创建一个轮播

var next = document.getElementById('next');
var prev = document.getElementById('prev');
var slideshow = document.getElementById('slideshow');

next.onclick = function() {
  var lastChild = slideshow.children[slideshow.children.length - 1];
  var firstChild = slideshow.children[0];
  var activeEle = document.querySelector('.item.active');
  var nextEle = document.querySelector('.item.next');
  var prevEle = document.querySelector('.item.prev');

  activeEle.classList.remove('active');
  activeEle.classList.add('prev');
  nextEle.classList.add('active');
  nextEle.classList.remove('next');
  prevEle.classList.remove('prev');
  
  if (nextEle.nextElementSibling) {
    nextEle.nextElementSibling.classList.add('next');
  } else {
    firstChild.classList.add('next');
  }
};

prev.onclick = function() {
  var lastChild = slideshow.children[slideshow.children.length - 1];
  var activeEle = document.querySelector('.item.active');
  var nextEle = document.querySelector('.item.next');
  var prevEle = document.querySelector('.item.prev');

  // Move the .active class to the previous element
  activeEle.classList.remove('active');
  activeEle.classList.add('next');
  prevEle.classList.add('active');
  prevEle.classList.remove('prev');
  nextEle.classList.remove('next');

  if (prevEle.nextElementSibling) {
    prevEle.nextElementSibling.classList.add('prev');
  } else {
    lastChild.classList.add('prev');
  }
};

#slideshow {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  color: white;
  background-color: blue;
  position: absolute;
  /*display: none;*/
  top: 0;
  left: 0;
  z-index: -100;
  transition: translateX(-100%);
  transition: transform .5s ease-in-out;
  opacity: 0;
}

.active {
  opacity: 1;
  display: block;
  z-index: 1;
  transform: translateX(0);
}

.next {
  transform: translateX(200%);
  z-index: 1;
}

.prev {
  transform: translateX(-100%);
  opacity: 1;
  z-index: 1;
}

<div id="slideshow">
  <div class="item active">1</div>
  <div class="item next">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item prev">7</div>
</div>
<button type="button" id="prev">Prev</button><button type="button" id="next">Next</button>