vue-transtion 过渡动画不走钩子

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"
  >
 1231231231
  </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);
}

</style>

Answer 1

内容需要v-show或v-if进行显示隐藏，才有效果。如果是列表渲染，需要使用transition-group