js监听transition过渡事件
html
<div id="mydiv"> </div>
style
#mydiv{
width:100px;
height:100px;
background:red;
-webkit-transition: width 2s ease-in-out;
transition: width 2s ease-in-out;
}
#mydiv:hover{
width:400px;
}
js
document.getElementById("mydiv").addEventListener("transitionend",function(e){
this.innerHTML="过渡事件触发--过渡以完成"
})
上面的例子,当鼠标覆盖div时,触发transition过渡效果,将宽度变为400px。
然后js监听了div的过渡效果的结束事件,当过渡效果结束时,往当前元素(div)添加文本内容。
当然,还可以监听,过渡事件的开始,进行,结束事件,分别为transitionstart、transitionrun、transitionend。
js监听transition过渡事件的更多相关文章
- JS监听关闭浏览器事件
Onunload与Onbeforeunload Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或 ...
- js监听浏览器关闭事件
html : <HTML> <HEAD> <title>test</title> </HEAD> <body onbefore ...
- js 监听组合键盘事件
有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete.up.down等 两位 ...
- js监听页面copy事件添加版权信息
个人博客 地址:http://www.wenhaofan.com/article/20180921103346 1.介绍 当页面需要做版权保护时,比如当用户copy我们网站的文章时,我们会希望在他co ...
- js 监听输入框输入事件兼容ie7
$(element).bind("input propertychange",function(){});
- js监听浏览器返回事件
$(function(){ pushHistory(); window.addEventListener("popstate", function(e) { window.loca ...
- js监听浏览器后退事件
$(document).ready(function(e) { var counter = 0; if (window.history && ...
- ActiveX(二)Js 监听 ActiveX中的事件
在上一篇随笔:ActiveX(一)第一个简单的Demo 中,已经可以实现 js 单向调用 ActiveX 中的方法,在很多情况下ActiveX中的方法的执行时相对耗时.耗性能的.在这样的情况下.Act ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
随机推荐
- golang 客户端
package main import ( "fmt" "io/ioutil" "net/http" ) func main() { fmt ...
- ubuntu下npm全局安装包报错的解决方案
大概就是 npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ERR ...
- Vanya and Scales CodeForces - 552C (思维)
大意: $101$个砝码, 重$w^0,w^1,...,w^{100}$, 求能否称出重量$m$. w<=3时显然可以称出所有重量, 否则可以暴力双端搜索. #include <iostr ...
- sccrapy 爬虫框架网数据库储存时去重的问题
from scrapy.exceptions import DropItem #导入异常处理模块 class Baidu03Pipeline(object): def __init__(self): ...
- phpcms修改重置后台账号和密码
通过Phpmyadmin等工具,打开数据库中找到v9_admin表: 把password字段值改为: 0b817b72c5e28b61b32ab813fd1ebd7f再把encrypt字段值改为: 3 ...
- java中的运算符与表达式
运算符与表达式 运算符分类: 0.赋值运算符 = 1.算数运算符 + - * / % 2.比较运算符 < > == <= >= != 3.逻辑运算符 & | ! &am ...
- Python中GUI库PyQt5的安装和配置
在使用Tkinter开发GUI程序时,发现相关文档比较少,开发起来太累.经过综合比较,决定使用PyQt这个库.下面是简单的安装步骤. 1.安装 PyQt5 : pip install PyQt5 -i ...
- ubuntu18.04安装fcitx
fcitx安装比较麻烦,我每次安装都要费不少劲,每次装安之后都没有写日志记录下来,导致下次装的时候又手忙脚乱,所以这次一定要记录下来. 前因: 我本来用的是ibus,但是这个输入法好像有bug,我在编 ...
- Centos7查不出ip地址
今天遇到了这个问题,解决后记录一下: //输入查询命令 ifconfig或者ip addr 如图,是显示不出信息的 找到ens33的配置文件,输入命令 vi /etc/sysconfig/networ ...
- 逆向破解 H.Koenig 遥控器 Part 1
逆向破解 H.Koenig 遥控器(Part 1) 最近我正在尝试一研究些自动吸尘器机器人.iRobot公司的Roomba貌似是该领域的领导者,但是作为实验来讲的话这些东西真是太昂贵了,我也找不到 ...