vue的过渡动态修改问题

Question

1、需求： 一个物体要移动一段距离，但是这段距离不是固定的，可能是100px,200px,这个是在JS中动态计算出来的。
2、我曾尝试直接修改style中的transfrom,发现和vue的过渡不兼容，JS中修改了transfrom后，vue的过渡不生效了，但是用纯css来做动画的话，因为我物体是v-if来控制显示的，纯CSS又没有效果。
3、请教各位如何动态的修改vue过渡属性

    <transition name="fade">
      <div class="transition" ref="transition" v-if="boxShow"></div>
    </transition>
    
    .fade-enter-active, .fade-leave-active{
      transition: all 2s;
    .fade-enter, .fade-leave-to {
      opacity: 0;
      /*transform: translateY(500px)*/ 这个是要动态修改的属性
      transform: scale(0);
    }

Answer 1

<transition
    @before-enter="beforeLeave"
    @enter="leaving"
    @after-enter="afterLeave">
    <div class="transition" ref="transition" v-show="boxShow"></div>
</transition>

// y等于要移动的距离
beforeLeave(el) {
    el.style.transform = el.style.webkitTransform = `translate3d(0,${y}px,0)`
},
leaving(el, done) {
   
},
afterLeave(el) {
   el.style.display = 'none'
},