transitionend事件 监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）
//下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听。
//说白了在fadeIn fadeOut 后面监听动画结束时，transitionend是不会执行的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width: 60px;
height: 30px;
background: green;
color: #fff;
}
.box {
background: yellow;
width: 300px;
height: 300px;
margin: 100px auto;
}
</style>
</head>
<body>
<button class="btn">点击</button>
<div class="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var $btn = $('.btn'),
$box = $('.box'); //下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听。
//说白了在fadeIn fadeOut 后面监听动画结束时，transitionend是不会执行的。
$btn.on('click',function(){
$box.fadeOut();
$box.on('transitionend',function(){
console.log(11);
})
})
/*$btn.on('click',function(){
$box.css({
background:'red',
transition:'all 2s'
})
$box.on('transitionend',function(){
console.log(11);
})
})*/ </script>
</body>
</html>
transitionend事件 监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）的更多相关文章
- Javascript事件监听
FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...
- Zookeeper Curator 事件监听 - 秒懂
目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...
- js实现事件监听与阻止监听传播
监听事件: 使用attachEvent(用于IE)和addEventListener(用于谷歌.火狐)时则可以实现多个事件处理函数的调用 1.下面都是dom对象的方法,可以实现一种事件绑定多个事件处理 ...
- DOM 事件监听 事件冒泡 事件捕获
addEventListener() 方法 实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventList ...
- Java界面编程—事件监听机制
组件首先要先注册事件处理器,当用户单击组件.移动鼠标或者敲击键盘时都会产生事件(Event),一旦有时间发生,应用程序就会做出对该事件的响应,这些组件就是事件源(Event source). 接受.解 ...
- 关于实现自定义Dialog和实现Dialog里view的事件监听的两种方法
一.自定义dialog. 二.实现dialog里view的事件监听 1.自定义dialog比较简单.在实例化new的时候,加入样式,布局就行了.或者重写dialog. 2.实现dialog里view的 ...
- [问题贴]mui.openWindow+自定义事件监听操作让alert()执行两次
仔细看,Alert函数执行了两次 共两个页面:index.html和detail.html, detail.html为按钮设置了自定义事件监听(newsId),触发alert. 在index.html ...
- Java中用得比较顺手的事件监听
第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
随机推荐
- Spring 中的统一异常处理
在具体的SSM项目开发中,由于Controller层为处于请求处理的最顶层,再往上就是框架代码的.因此,肯定需要在Controller捕获所有异常,并且做适当处理,返回给前端一个友好的错误码. 不过, ...
- http拦截器-HandlerInterceptor
简介 拦截器我想大家都并不陌生,最常用的登录拦截.权限校验.防重复提交.记录日志等等,总之可以去做很多的事情. 自定义拦截器HandlerInterceptorAdapter 我们以记录日志为例,介绍 ...
- 剑指offer28：找出数组中超过一半的数字。
1 题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出 ...
- 字符串char vchar性能对比补充
Value CHAR(4) Storage Required VARCHAR(4) Storage Required '' ' ' 4 bytes '' 1 byte 'ab' 'ab ' 4 ...
- Python socket编程 (2)--实现文件验证登入
可以实现从客户端输入账号和密码然后发送到服务器进行验证,实现用户登入校正操作. 服务器: import socket import json server = socket.socket() serv ...
- [Luogu5319][BJOI2019]奥术神杖(分数规划+AC自动机)
对最终答案取对数,得到$\ln(Ans)=\frac{1}{c}\sum \ln(v_i)$,典型的分数规划问题.二分答案后,对所有咒语串建立AC自动机,然后套路地$f[i][j]$表示走到T的第i个 ...
- openfeign与gateway中的httpClient类声明冲突
启动spring cloud中的网关,报错: ***************************APPLICATION FAILED TO START*********************** ...
- Python基础数据类型（数字、字符串、布尔、列表、元组、字典、集合等）
数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定 ...
- springboot mvc自动配置（目录）
对于长时间基于spring框架做web开发的我们,springmvc几乎成为了开发普通web项目的标配.本系列文章基于快速启动的springboot,将从源码角度一点点了解springboot中mvc ...
- 【转载】网站配置Https证书系列(三)：IIS网站设置Http链接直接跳转Https安全连接
Http链接请求是以明文的方式传输,在传输的过程中很容易被篡改数据,一个典型的例子就是运营商的网络劫持注入广告信息等,而Https请求则是安全加密的请求,报文数据以密文的形式进行传输.当IIS网站配置 ...