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

vue 中的translation操作----动态值的更多相关文章

  1. [记录] Vue中的dom操作

    使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...

  2. Vue中如何监控某个属性值的变化?

    比如现在需要监控data中, obj.a 的变化.Vue中监控对象属性的变化你可以这样: deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改: 还有一种 ...

  3. Vue中的DOM操作

    1.在要获取的标签中添加 ref="xx" 示例: <button ref="btn">一个按钮</button> 2.在 mounte ...

  4. 046——VUE中组件之使用动态组件灵活设置页面布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue中渲染页面,动态设置颜色

    for循环中动态设置页面的图标或者字体颜色与循环中且套循环 :style="{'color':items.color}" 案例代码: html中 <div class=&qu ...

  6. vue中的分页操作

    首先,先看分页的代码: 这里还需要进行操作: 1.分页操作主要传递俩个数据,total和pagenum,一个显示当前页面共有多少条数据,一个是翻页后的操作,看列表的数据能不能跟着改变,在进页面发送请求 ...

  7. vue中的插值操作

    mustache语法 1.将data的文本数据插入至html语句中,使用mustache语法. v-once指令 2.在某些情况下,我们不希望界面随意的跟随改变,这个时候我们可以使用v-once的指令 ...

  8. vue中的img src 动态加载本地json的图片路径写法。

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-b ...

  9. vue中的select框的值动态绑定

    <--这两种写法效果一样--> 1: <select v-model="wxStatus"> <option label="已添加" ...

随机推荐

  1. 毕业设计(3)基于MicroPython的篮球计时计分器模型的设计与实现

    前言 我们身边有不少人都喜欢看篮球比赛或者经常打篮球.说起篮球,肯定要提到NBA(美国职业篮球联赛),现在也正是NBA 18-19赛季常规赛的时候.最近3月5日,韦少22分帮助雷霆终结了四连败,哈登4 ...

  2. Element ui 日期限制范围

    时间限定范围: <el-date-picker type="date" placeholder="选择日期" v-model="addForm. ...

  3. ftm国际化解决方案

    记录一下踩过的坑,在使用ftm:message的时候我发现这个的国际化是依赖于本地浏览器的语言环境的!关于自主设置这个语言的方法有如下3种:(个人建议使用第二种,可以更加灵活且有效!第一种我这边没有生 ...

  4. js中如何向json数组添加元素

    //1. var jsonstr="[{'name':'a','value':1},{'name':'b','value':2}]"; var jsonarray = eval(' ...

  5. NOIP算法小结(转载)

    (一)数论 1.最大公约数,最小公倍数 2.筛法求素数 3.mod规律公式 4.排列组合数,错排 5.Catalan数 6.康托展开 7.负进制 8.中位数的应用 9.位运算 (二)高精度算法 1.朴 ...

  6. C# 将前端传来的图片文件分别以大图和缩略图保存

    HttpPostedFile pic_upload = Request.Files["file"]; Bitmap bitmap = (Bitmap)System.Drawing. ...

  7. java返回json设置自定义的格式

    使用注解@JsonSerialize(using = CustomPriceSerialize.class) 创建自定义的格式化类(可为内部类) /** * 设置默认返回的小数类型(0.01 元) * ...

  8. Hibernate对应关系(了解)

    布置的任务要用就写一下总结一下 hibernate有以下几种关系 一对一 一对多 多对一 多对多 首先这些对应关系是分单向和双向的 单向和双向有什么区别呢? 这个双向单向是面向对象的说法 意思就是你更 ...

  9. loj6074 子序列

    题目链接 思路 首先考虑暴力\(dp\) 用\(f[i][j]\)表示前\(i\)个字符,以\(j\)这个字符结尾的本质不同的字符串个数. 然后就有如下的转移 \(if(s_i==j)\) \[f_{ ...

  10. 第二篇--上传git 代码

    准备工作: 首先,注册一个GitHub账号. 接着,新建一个仓库. 最后,下载Git 上传代码步骤: 第一步,新建一个本地文件夹作为本地仓库,进入该文件夹. 右击选择Git Bash Here ,输入 ...