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元素的动画效果。