Как сделать более плавную анимацию?

    const slides = [
  {
    id: 1,
    title: "Audi",
    model: "A7",
    engine: "Бензин",
    kpp: "Автомат",
    body: "Седан",
    year_from: "2010",
    old_price: "1200000",
    price: "2100000",
    img: "/images/img1.webp",
    mod: "1.8i CVT (160 л.с.)",
    mileage: "90000",
  },
  {
    id: 2,
    title: "BMW",
    engine: "Бензин",
    model: "1 серия",
    kpp: "Механическая",
    body: "Седан",
    year_from: "2010",
    old_price: "1200000",
    price: "1100000",
    img: "/images/img1.webp",
    mod: "1.8i CVT (160 л.с.)",
    mileage: "90000",
  },
  {
    id: 3,
    title: "BMW",
    engine: "Дизель",
    model: "2 серия",
    kpp: "Механическая",
    body: "Седан",
    year_from: "2010",
    old_price: "1200000",
    price: "900000",
    img: "/images/img1.webp",
    mod: "1.8i CVT (160 л.с.)",
    mileage: "90000",
  },
  {
    id: 4,
    title: "BMW",
    engine: "Дизель",
    model: "3 серия",
    kpp: "Механическая",
    body: "Седан",
    year_from: "2011",
    old_price: "1200000",
    price: "1200000",
    img: "/images/img1.webp",
    mod: "1.8i CVT (160 л.с.)",
    mileage: "90000",
  },
  {
    id: 5,
    title: "BMW",
    engine: "Дизель",
    model: "3 серия",
    kpp: "Механическая",
    body: "Седан",
    year_from: "2010",
    old_price: "1200000",
    price: "1200000",
    img: "/images/img1.webp",
    mod: "1.8i CVT (160 л.с.)",
    mileage: "90000",
  },
  {
    id: 6,
    title: "BMW",
    engine: "Дизель",
    model: "3 серия",
    kpp: "Механическая",
    body: "Седан",
    year_from: "2001",
    old_price: "1200000",
    price: "1200000",
    img: "/images/img1.webp",
    mod: "1.8i CVT (160 л.с.)",
    mileage: "90000",
  },
];
  new Vue({
  el: '.slider-wrapper',
  computed: {
    cars() {
      if (this.slides.length === 1) {
        return [this.slides[this.active - 1]];
      }
      return [this.slides[this.active - 1], this.slides[this.active]];
    },
    numSlides() {
      return this.slidesMinusOne;
    },
    slidesMinusOne() {
      return this.slides.length - 1;
    },
  },
  data() {
    return {
      slides,
      active: 1,
    };
  },
  methods: {
    onCarClicked(car) {
      this.$emit("on-car-clicked", car);
    },
    moveToSlide(amount) {
      let newActive;
      const newIndex = this.active + amount;
      if (newIndex > this.slides.length) {
        newActive = 1;
      }
      if (newIndex === 0) {
        newActive = this.slides.length;
      }
      this.active = null;
      this.active = newActive || newIndex;
    },
    jumpToSlide(index) {
      this.active = null;
      this.active = index;
    },
    slideDotsClass(i) {
      if (i + 1 !== this.active) {
        return "";
      }
      return "dot__active";
    },
  },
})

       .slider-wrapper {
    position: relative;
}

.slider__slide {
    padding: 50px;
    cursor: pointer;
    color: #fff;
}

.slider-arrows {
    display: flex;
    color: #000;
}

.slider-arrow-left {
    position: absolute;
    transform: translate(0, -50%);
    top: 50%;
    left: 20px;
    cursor: pointer;
    width: 30px;
}

.slider-arrow-right {
    position: absolute;
    transform: translate(0, -50%);
    top: 50%;
    right: 20px;
    cursor: pointer;
    width: 30px;
}
.slider-dots {
    display: flex;
    position: absolute;
    transform: translate(0, -50%);
    right: 50%;
    bottom: 0;
}

/* .slider-dot:not(:first-child) {
    margin-left: 1.25rem;
} */
.slider-dot {
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border: 0.15rem solid #fff;
    cursor: pointer;
    box-shadow: 0px 2px 8px #00000029;
}

.dot__active {
    background: #c8102e;
}

.cars-list {
    display: flex;
    justify-content: space-between;
}

.cars-item {
    flex-basis: 48%;
  cursor: pointer;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
  
  .fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

  <div v-if="numSlides + 1" class="slider-wrapper">
    <transition-group name="fade" tag="div" class="cars-list" mode="out-in">
      <!-- car-single -->
      <div
        class="cars-item"
        v-for="car in cars"
        :key="car.id"
        @click="onCarClicked(car)"
      >
        <div class="cars-item__img">
          <img :src="car.img" alt="" />
        </div>
        <div class="cars-item__text">
          <div class="cars-item__title">
            {{ car.title }}
          </div>
          <div class="cars-item__mod">
            {{ car.mod }}
          </div>
          <div class="cars-item__kpp">
            <span>{{ car.kpp }}</span>
            <span>{{ car.engine }}</span>
          </div>
          <div class="cars-item__year-from">
            {{ car.year_from }}
          </div>
          <div class="cars-item__mileage">
            {{ car.mileage }}
          </div>
          <div class="cars-item__old-price">
            {{ car.old_price }}
          </div>
          <div class="cars-item__price">
            {{ car.price }}
          </div>
        </div>
      </div>
    </transition-group>

    <div class="slider-dots" v-if="numSlides > 1">
      <div
        class="slider-dot"
        v-for="(btn, i) in slidesMinusOne"
        :key="btn.id"
        @click="jumpToSlide(i + 1)"
        :class="slideDotsClass(i)"
      ></div>
    </div>

    <div class="slider-arrows">
      <div @click="moveToSlide(-1)" v-if="active > 1" class="slider-arrow-left">
        Лево
      </div>
      <div
        @click="moveToSlide(1)"
        v-if="active < numSlides"
        class="slider-arrow-right"
      >
        Право
      </div>
    </div>
  </div>