vue-transtion 过渡动画不走钩子 2

Question

想要实现这从左往右出现到屏幕的过渡效果，实现不了，且不走transtion 钩子函数，不知道怎么修改。
代码如下： 手动粘贴 未整理格式。
首页：

<template>
<div class="hello">
    <van-cell title="单元格" is-link to="/shopCart" />
    <van-button  type="primary" @click="jump">跳转</van-button>
 </div>
</template>

<script>
export default {
methods:{jump () {
      this.$router.push('/shopCart')
    }}}
   </script> 

shopCart: 其中beforeEnter enter 都不走 但是按照官网的方式是好使的

<template>
<transition
    name="slide"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
  >
  <div class="con">
<button@click="$router.goBack()">返回</button>
</div>
  </transition>
</template>
<script>
export default {
methods:(){
 beforeEnter: function (el) {
      console.log(el)
    },
    enter () {
      alert(1)
    }
    }
    }
    </script>
<style>
.slide-enter-active,
.slide-leave-active {
  transition: all .5s;
}

.slide-enter,
.slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
.con{
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
}
</style>

Answer 1

transition里的div需要加个v-show或v-if,显示隐藏才可以触发transition动画效果。

<transition
    name="slide"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
  >
  <div v-show="showBtn" class="con">
    <button@click="$router.goBack()">返回</button>
  </div>
</transition>
export default {
    created() {
        setTimeout(() => {
            this.showBtn = true
        },1000)
    },
    data() {
        return{
            showBtn:false
        }
    }
}
</script>