Vue：旋转木马滑动时的空白答案

【问题标题】：Vue: whitespace when carousel is slidingVue：旋转木马滑动时的空白
【发布时间】：2019-11-02 20:30:15
【问题描述】：

我想使用 VueJs 创建轮播时遇到了问题。我的问题是，滑块运行时似乎有空格。当一个图像转到其他图像时，似乎有一瞬间的空白在一秒钟后消失。

这是我的代码：

Vue.component('kangaroo-slider', {
  template: `
    <div id="carousel">

        <div class="carousel__inner" >
          <div class="carousel__item">
            <a href="#">
              <transition tag="div" :name="transitionName">
                <img :src="image[current]" class="carousel__image" :key="current">
              </transition>
            </a>
          </div>
        </div>


    </div>
  `,
  data: function() {
    return {
      image: [
        'https://www.pocarisweat.id//assets/uploads/2019/09/54ad7ba3a1892e0bcc365d021507b713.png',
        'https://www.pocarisweat.id//assets/uploads/2019/08/09b43d7b3fb60d5acf782f9510cb87a0.jpg',
        'https://www.pocarisweat.id//assets/uploads/2019/08/00a75c18203defa69bc8ad7aace5f60b.jpg'
      ],
      current: 0,
      show: false,
      transitionName: 'fade',
      show: true
    }
  },
  methods: {
    slide() {
      let maxSlide = this.image.length
      setInterval(() => {
        if (this.current < maxSlide - 1) {
          this.transitionName = 'slide-next'
          this.current++
        } else {
          this.transitionName = 'slide-prev'
          this.current = 0
        }

      }, 2000)

    }
  },
  created () {
    this.slide()
  },
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

你可以在这里看到它是如何工作的：https://codepen.io/learningfrontendweb/pen/ZEEvRRZ

【问题讨论】：

不确定如何修复它，但你得到空白的原因是因为没有什么可以说明下一张图像应该从哪里滑入。下一个图像有效地从其默认位置滑入，该位置已经在屏幕上，即 translate(0px) 。但由于前一个图像仍在滑出并占用该空间，因此必须等待该过渡完成。

标签： javascript css vue.js vuejs2

【解决方案1】：

你只需要在你的css文件中做一些改变

.carousel__inner {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 400px;
}

.carousel__image {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

无论如何，这里是我修复它的链接：

https://codepen.io/Nevados/pen/mddXWYy

【讨论】：