Vue.js，转换和插槽一起工作

Question

我一直在尝试使用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方法）