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 中的东西)因为在这种情况下它是无用的。

Answer 1

首先是 transition: <property-name> 0.5s linear;而不是 transition: 0.5s; .查看transition documentation .

没有用于更改图像 src 的动画(请参阅 list of animatable css properties)。

要做到这一点，您可以将所有图像堆叠到一个元素中，然后使用 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>