vue.js离开过渡问题

Question

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;
}

Answer 1

您可以尝试：轻松进行：

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

...或.slide-fade-enter-active插入后面：

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