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

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

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

this.myTime = setTimeout(()=>{

          var contentHeight = this.$refs.couponContent ? this.$refs.couponContent.offsetHeight :

          var mybox = this.$refs.mybox ? this.$refs.mybox.offsetHeight :

          var myel = this.$refs.mybox ? this.$refs.mybox : ''

},)

在dom元素中需要加一个

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

2、translate的应用

 var i =

 var sheight = mybox-contentHeight

 setInterval(()=>{

    myel.style.transform =`translateY(-${i}px)`;

    i++

    if(i>sheight){

    myel.style.transform =`translateY(0px)`;

        i=

    }

},)

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