时间戳

首页 > 解决方案 > vuejs离开过渡问题

css - vuejs离开过渡问题

问题描述

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

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

样式.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;
}

标签： cssvue.jstransition

解决方案

你可以试试：缓入出局：

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

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

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

推荐阅读