How can I fix this jumping transition?

I'm trying to build some kind of fade slider but got weird jumps between transition, already tried solution from this question but it doesn't work in my case. I can't figure out why this happen, to be clear, please have a look at this gif

If possible, I would like to know which part is causing this as well as how can I fix it. Any kind of help will be very appreciated. Please have a look at my script.. Thanks in advance!

<template>    <header class="hero">      <div class="container">        <div class="textbox">          <transition name="fade" v-for="(slide, i) in slides" :key="slide">            <h1 class="punchline" v-if="current == i"></h1>          </transition>          <NuxtLink class="link" to="/">            <div class="icon-wrapper">              <Icon icon="chevron-right" />            </div>          </NuxtLink>        </div>        <div class="indicator">          <span            v-for="(slide, i) in slides"            :key="slide"            :class="{ active: current == i }"            class="item"            @click="animateTo(i)"          />        </div>      </div>      <Vector :class="color" class="stick-overlay stick-top" file="model-stick" />      <Vector        :class="color"        class="stick-overlay stick-bottom"        file="model-stick"      />    </header>  </template>      <script>  export default {    data() {      return {        current: 0,        slides: ['Slide 001', 'Slide 002', 'Slide 003']      }    },    computed: {      color() {        if (this.current == 1) return 'blue'        if (this.current == 2) return 'purple'        return 'default'      }    },    methods: {      animateTo(index) {        this.current = index      }    }  }  </script>    <style lang="scss" scoped>  .fade-enter-active,  .fade-leave-active {    transition: opacity 0.5s;  }  .fade-enter,  .fade-leave-to {    opacity: 0;  }    .hero {    @apply flex;    @apply justify-center;    @apply items-center;    @apply text-white;    @apply relative;      height: 810px;    background: url('/images/img-hero.png');    background-position: center;    background-size: cover;    background-repeat: no-repeat;      .textbox {      @apply relative;      @apply text-center;      @apply mb-20;        .punchline {        @apply text-3xl;        @apply font-semibold;        @apply leading-relaxed;        @apply mb-10;      }        .link {        @apply flex;        @apply justify-center;          .icon-wrapper {          @apply h-16 w-16;          @apply border;          @apply border-white;          @apply flex;          @apply justify-center;          @apply items-center;          @apply rounded-full;        }      }    }      .indicator {      @apply flex;      @apply justify-between;      @apply items-center;      @apply px-20;        .item {        @apply inline-block;        @apply h-2 w-2;        @apply border;        @apply border-white;        @apply rounded-full;        @apply transition-colors;        @apply duration-300;          &.active {          @apply bg-white;        }      }    }      .stick-overlay {      @apply absolute;      @apply z-0;        &.stick-top {        top: -75%;        left: -75%;        transform: scale(0.6) rotate(180deg);      }        &.stick-bottom {        @apply block;        bottom: -80%;        left: -5%;        transform: scale(0.6);      }        &::v-deep svg path {        @apply transition-all;        @apply duration-1000;      }        &.default ::v-deep svg path {        fill: rgba(0, 40, 255, 0.5);      }        &.blue ::v-deep svg path {        fill: rgba(33, 167, 252, 0.3);      }        &.purple ::v-deep svg path {        fill: rgba(119, 41, 251, 0.3);      }    }  }  </style>    

https://stackoverflow.com/questions/66094596/how-can-i-fix-this-jumping-transition February 08, 2021 at 08:41AM