vue 中的translation操作----动态值

在vue中，也会遇见translate的情况，这里顺带也可以带上如何查找页面中的元素的案例。

1、在加载过程中，有会遇见加载顺序先后的问题，然后查找页面元素null的情况，所以在mounted的钩子函数当中，需要加一个计时器延缓获取的操作。代码如下：

this.myTime = setTimeout(()=>{
          var contentHeight = this.$refs.couponContent ? this.$refs.couponContent.offsetHeight : 0
          var mybox = this.$refs.mybox ? this.$refs.mybox.offsetHeight : 0
          var myel = this.$refs.mybox ? this.$refs.mybox : ''  
},50)

在dom元素中需要加一个

<div class="wrap mybox" id="mybox" ref="mybox"></div>

 2、translate的应用

 var i = 0
 var sheight = mybox-contentHeight
 setInterval(()=>{
    myel.style.transform =`translateY(-${i}px)`;
    i++
    if(i>sheight){
    myel.style.transform =`translateY(0px)`;
        i=0
    }
},50)

i的值可以动态的绑定在translate上面实现dom元素的动画效果。