vuejs离开过渡问题

Question

vuejs 转换有问题。 https://streamable.com/veu6zz 当transition进入时它工作得很好，但是当transition out时它不起作用。

遗传.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

你可以试试：ease-in-out：

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

...或在 .slide-fade-enter-active insert 后面：

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