vue transition离开页面动画效果

离开页面的时候页面有个从左到右渐渐退出到效果

<template>
    <Transition name="slide">
        <div class="city-wrap">肯德基的</div>
    </Transition>
</template>
<script>

</script>·
<style lang="less" scoped>
    @import '~@/styles/mixins.less';
    .city-wrap {
        width: 100%;
        height: 100vh;
        background-color: pink;
    }
    .slide-leave-active {
        transition: all 1s;
    }
    .slide-leave-to {
        transform: translate3d(100%,0,0);
    }
</style>

image.png