带有Vue.js的GSAP - 补充活动数据属性

Question

我使用javascript hooks进行vue转换：

 <transition @before-enter="beforeEnterEl" @enter="enterEl"
             @leave="leaveEl" :css="false">
  // .... my element here
</transition>

在beforeEnterEl()中，我只设置el.style.opacity = 0;

在输入钩子enterEl()中，我有以下两行：

// (1) Tween dom element directly:
TweenLite.to(el,         1.0, { opacity: 1, right: 300       });     
// (2) Tween a reactive data property:
TweenLite.to(this.$data, 0.5, { radius: 50, onComplete: done });

radius是一个vue数据属性，我绑定到元素本身的圆圈svg上的r属性（在这种情况下，由转换包装的元素只是包含一个svg的svg单圈定义）。

在等效的假javascript钩子上，当转换包装器是v-if时转换不起作用，但是在使用v-show时它会起作用。我不清楚为什么。我认为vue过渡也可以用v-if和v-show包装。不是在这种情况下，它出现了。

因此，目前我还没有完全了解在实际的vue（反应绑定）数据属性上使用GSAP补间的含义，而不是直接在dom元素上。

有人可以从第一原则解释吗？谢谢！