vue-router过渡动画，只有离开动画，没有进入动画？

Question

    <template>
        <transition name="slide-left">
            <router-view></router-view>
        </transition>
    </template>
    <style>
    .slide-left-enter-active, .slide-left-leave-active {
        transition: transform .5s;
        transform-origin: left;
    }
    .slide-left-enter, .slide-left-leave-active {
        transform: scale(0,1);
    }
    </style>

路由改变时，页面从右到左消失，然后新页面直接跳出来，没有过渡效果

Answer 1

我发现可以了。 你仔细看下 元素 它掉下去了，只要 position:absolute 定位上来就可以了

Answer 2

事实上不需要加position:absolute，这样可能会打乱原有布局。
只需要在transition标签里可以设置mode="out-in"，具体看这里
https://cn.vuejs.org/v2/guide/transitions.html#过渡模式

Answer 3

在进入的class加上delay就好了

.slide-left-enter-active {
    transition-delay: 0.5s;
}