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元素的动画效果。
vue 中的translation操作----动态值的更多相关文章
- [记录] Vue中的dom操作
使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...
- Vue中如何监控某个属性值的变化?
比如现在需要监控data中, obj.a 的变化.Vue中监控对象属性的变化你可以这样: deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改: 还有一种 ...
- Vue中的DOM操作
1.在要获取的标签中添加 ref="xx" 示例: <button ref="btn">一个按钮</button> 2.在 mounte ...
- 046——VUE中组件之使用动态组件灵活设置页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中渲染页面,动态设置颜色
for循环中动态设置页面的图标或者字体颜色与循环中且套循环 :style="{'color':items.color}" 案例代码: html中 <div class=&qu ...
- vue中的分页操作
首先,先看分页的代码: 这里还需要进行操作: 1.分页操作主要传递俩个数据,total和pagenum,一个显示当前页面共有多少条数据,一个是翻页后的操作,看列表的数据能不能跟着改变,在进页面发送请求 ...
- vue中的插值操作
mustache语法 1.将data的文本数据插入至html语句中,使用mustache语法. v-once指令 2.在某些情况下,我们不希望界面随意的跟随改变,这个时候我们可以使用v-once的指令 ...
- vue中的img src 动态加载本地json的图片路径写法。
目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-b ...
- vue中的select框的值动态绑定
<--这两种写法效果一样--> 1: <select v-model="wxStatus"> <option label="已添加" ...
随机推荐
- SQL insert into select 语句
遇到权限数据变更的需要批量到别的平台, 在175平台添加一个权限需要, 批量到别的现有平台, 以后的建站, 会把sql放到自动建站里面; 权限的 insert into select 表一: `ous ...
- 关于php中 json_encode 编码成json数据参数说明
JSON_UNESCAPED_SLASHES 编码不要转义符 \ 反斜杠 JSON_UNESCAPED_UNICODE 编码不转义成 unicode 字符串 如果如果多个参数可以用 | 隔开添 ...
- ubuntu搭建JavaEE环境
安装Jave和Tomcat 参考:安装Java和Tomcat 安装eclipse 下载地址:https://www.eclipse.org/downloads/packages/ 我下载的时Eclip ...
- 私有仓库 gitlab 部署笔记
--------------------------------------------gitlab简介------------------------------------------------ ...
- 【zabbix教程系列】六、自动注册(Linux)
一.agent安装脚本 #!/bin/bash #ltt #安装zabbix源 rpm -ivh http://repo.zabbix.com/zabbix/3.4/rhel/7/x86_64/zab ...
- js 时间格式,加减
Date.prototype.Format = function (fmt) { //author: rixiao var o = { "M+": this.getMonth() ...
- Luogu4363 [九省联考2018]一双木棋chess 【状压DP】【进制转换】
题目分析: 首先跑个暴力,求一下有多少种状态,发现只有18xxxx种,然后每个状态有10的转移,所以复杂度大约是200w,然后利用进制转换的技巧求一下每个状态的十进制码就行了. 代码: #includ ...
- mysql 数据库表迁移复制
1. 表结构相同的表,且在同一数据库(如,table1,table2) insert into table1 select * from table2 # 完全复制 insert into table ...
- 谈谈JavaScript中继承方式
聊一聊js中的继承 一.简单继承---使用原型赋值的方式继承,将实例化的对象,赋值给子级的原型 父级构造函数 function Parent(param) { this.name = 'parent' ...
- Spring bean实例化的方式
实例化过程如图,方式如图. 甩代码. 方式一:构造方法 搞一个bean,修改一下xml配置 package com.itheima.instance.constructor; public class ...