Блог

проблема с переходом vuejs. https://streamable.com/veu6zz Когда переход входит, он работает хорошо, но когда переход выходит, он не работает.

genetic.vue

 <transition name="slide-fade">
            <div class="father_select" v-if="selecting == 'father'">
            <flickity
                :options="flickityOptions"
                ref="flickity"
                @init="api=$event.flickityApi"
            >
            <div class="carousel-cell" v-on:click="setFather('layer9.png')"><img src="layer9.png"/></div>
            <div class="carousel-cell" v-on:click="setFather('mama.png')"><img src="mama.png"/></div>   
            <div class="carousel-cell"><img src="../layer9.png" /></div>      
            </flickity>
        </div>
        </transition>
  

style.css

 .slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
  

вы можете попробовать: простота ввода-вывода:

 .slide-fade-enter-active {
    transition: all .3s ease-in-out;
}
  

…или позади.слайд-затухание-ввод-активная вставка:

 slide-fade {
    transition: all .3s ease-in-out;
}