Vue.js, 전환 및 슬롯을 함께 사용할 수 있음

Vue.js, 전환 및 슬롯을 함께 사용할 수 있음

나는 Vue.js와 함께 회전목마를 개발하려고 노력해왔지만 나는 전환 효과에 사로잡혀 있다.다음은 내 암호야

// Main component    
      <slider>
        <slide v-for="(slide, index) in compOpts.blockImg" :key="index">
          <img :src="slide" :alt="features ${index}`">
        </slide>
      </slider>

// Slider component
    <transition-group class="slider__container" name="slideTr" tag="div" appear mode="out-in">
      <slot></slot>
    </transition-group>

  import slide from './contentSliderSlide';

  export default {
    name: 'slider',
    data: () => ({
      slideCount: 0,
      activeSlide: 0,
      currentSlide: null,
      lastSlide: null,
      slideInterval: null
    }),
    mounted() {
      this.init();
    },
    methods: {
      getSlideCount() {
        this.slideCount = (
          this.$slots
          && this.$slots.default
          && this.$slots.default.filter(
            slot => slot.tag
              && slot.tag.indexOf('slide') > -1
          ).length
        ) || 0;
      },
      init() {
        this.getSlideCount();
        this.$slots.default[this.activeSlide].elm.classList.add('visible');
        this.playSlide();
      },
      gotoSlide(n, p) {
        this.currentSlide = (n + this.slideCount) % this.slideCount;
        if (p) {
          this.lastSlide = ((n - 1) + this.slideCount) % this.slideCount;
          this.$slots.default[this.lastSlide].elm.classList.remove('visible');
          this.activeSlide += 1;
        } else {
          this.lastSlide = ((n + 1) + this.slideCount) % this.slideCount;
          this.$slots.default[this.lastSlide].elm.classList.remove('visible');
          this.activeSlide -= 1;
        }
        this.$slots.default[this.currentSlide].elm.classList.add('visible');
      },
      playSlide() {
        this.slideInterval = setInterval(this.nextSlide, 2000);
      },
      nextSlide() {
        this.gotoSlide(this.activeSlide + 1, true);
      }
    },
    components: {
      slide
    }
  };

// Slide component
  <div class="slider__slide">
    <slot></slot>
  </div>

해결책이 없다면 적어도 후크 전후로 css 전환 효과를 구현하는 방법(순수 css 방식 사용)을 알려달라.

참조URL: https://stackoverflow.com/questions/45047473/vue-js-transition-and-slots-to-work-together