如何用vue制作自定义轮播动画？

Question

我正在使用 Quasar 开发 Vue 应用程序，我需要一个轮播。 Carousel 应该在没有任何 carousel 库的情况下制作（因为它有很多库不支持的特性）。 旋转木马可以工作，但幻灯片动画不行。我必须滑动由组件Slide 包裹的元素。 这是我的Carousel 组件中的代码 sn-p

<template>
    <transition-group
      class="slider"
      name="slide"
      tag="div"
    >
      // please don't pay attention on dataForSlider, it is just an array of objects with some data
      <div v-for="(slide, index) in dataForSlider" :key="index">
        <Slide
          v-if="currentPage === index"
          class="custom-slide"
          v-touch:swipe.left="swipeLeft"
          v-touch:swipe.right="swipeRight"
          :slide="slide"
          :activeSlide="index === currentPage"
          :index="index"
        >
//below components which are passed as a slot to the Slide component
          <Template1 v-if="slide.template === 'temp1' && currentPage === index" :slide="slide" :activeSlide="currentPage === index" :index="index"/>
          <Template2 v-else-if="slide.template === 'temp2' && currentPage === index" :slide="slide" :activeSlide="currentPage === index" :index="index"/>
          <Template3 v-else-if="slide.template === 'temp3' && currentPage === index" :slide="slide" :activeSlide="currentPage === index" :index="index"/>
          <Template4 v-else-if="slide.template === 'temp4' && currentPage === index" :slide="slide" :activeSlide="currentPage === index" :index="index"/>
          <Template5 v-else-if="slide.template === 'temp5' && currentPage === index" :slide="slide" :activeSlide="currentPage === index" :index="index"/>
          <Template6 v-else-if="slide.template === 'temp6' && currentPage === index" :slide="slide" :activeSlide="currentPage === index" :index="index"/>
          <Template7 v-else-if="slide.template === 'temp7' && currentPage === index" :slide="slide" :activeSlide="currentPage === index" :index="index"/>
          <Template8 v-else-if="slide.template === 'temp8' && currentPage === index" :slide="slide" :activeSlide="currentPage === index" :index="index"/>
        </Slide>
      </div>
    </transition-group>
</template>
<script>
import Slide from 'components/Slide'

import Template1 from 'components/slide-templates/Template1'
import Template2 from 'components/slide-templates/Template2'
import Template3 from 'components/slide-templates/Template3'
import Template4 from 'components/slide-templates/Template4'
import Template5 from 'components/slide-templates/Template5'
import Template6 from 'components/slide-templates/Template6'
import Template7 from 'components/slide-templates/Template7'
import Template8 from 'components/slide-templates/Template8'
export default {
  name: 'Carousel',
  components: {
    Slide,
    Template1,
    Template2,
    Template3,
    Template4,
    Template5,
    Template6,
    Template7,
    Template8
  },
  data () {
    return {
      currentPage: 0,
    }
  }
  methods: {
    swipeLeft () {
      this.currentPage = this.currentPage + 1
    },
    swipeRight () {
      this.currentPage = this.currentPage - 1
    }
  },
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
}
.custom-slide {
  width: 100%;
  height: 100vh;
  >div {
    height: 100%;
  }
}
.slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide-leave-active,
.slide-enter-active {
  transition: 1s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}
</style>

我的问题是我可以改变幻灯片，但我不能让它以流畅的动画滑动，它只会快速改变元素而不会从右到左滚动。有人能说问题出在哪里吗？谢谢

Answer 1

修改您的样式以使其具有不透明度，看看是否看起来平滑

.slide-leave-active,
.slide-enter-active {
  transition: opacity 0.5s;
}
.slide-enter {
  transform: translate(100%, 0);
  opacity: 0;
}
.slide-leave-to {
  transform: translate(-100%, 0);
  opacity: 0;
}

Answer 2

您是否尝试在变换上进行过渡？我认为您必须指定它：

.slide-leave-active,
.slide-enter-active {
  transition: transform 1s ease;
}