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 ...
随机推荐
- SQL 先固定特殊的几行数据之外再按照某一字段排序方法（CASE 字段排序（CASE WHEN THEN）
查询用户表的数据,管理员用户始终在最前面,然后再按照CreateTime排序: SELECT TOP * FROM [dbo].[User] WHERE ParentID = '**' ORDER B ...
- nmcli简单使用
nmcli connection 查看所有网卡信息 nmcli connection show ens33 查看网卡具体信息 nmcli connection reload 是配置文件生效
- NodeJS的环境搭建+传统ELmentui+vue开发
ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做 ...
- •C#进阶系列——WebApi接口测试工具：WebApiTestClient
阅读目录 一.WebApiTestClient介绍 二.WebApiTestClient展示 三.WebApiTestClient使用 1.如何引入组件 2.如何使用组件 四.总结 正文 前言:这两天 ...
- VS.NET(C#)--1.4项目与解决方案
项目与解决方案 项目 除创建网站,VS2005可创建项目.然后把项目放入解决方案中.VS2005可编译很多类型项目,分别是: 1.Windows应用程序 --在用戶计算机上运行的客户端应用程序,可显示 ...
- 将netcore网站部署到docker容器中
一.背景 最近一直在看docker的教程,基础知识看的差不多了.理论总要运用于实践,所以下面我们就来把最简单的一个netcore网站托管到docker容器中. 环境:1.docker for wind ...
- Python遗传和进化算法框架（一）Geatpy快速入门
https://blog.csdn.net/qq_33353186/article/details/82014986 Geatpy是一个高性能的Python遗传算法库以及开放式进化算法框架,由华南理工 ...
- Neo4J之标签类型
Neo4J的标签可以理解一个类,在创建一个节点时可以设置一个或多个标签: 1. 标签名为中文(可以) CRATE(节点名:标签1:标签2{属性1:34} 创建了一个节点名为“节点名”的节点(不可以用节 ...
- java封装数据类型——Byte
Byte 是基本类型byte的封装类型.与Integer类似,Byte也提供了很多相同的方法,如 decode.toString.intValue.floatValue等,而且很多方法还是直接类型转换 ...
- 【转载】 C#使用Union方法求两个List集合的并集数据
在C#语言的编程开发中,有时候需要对List集合数据进行运算,如对两个List集合进行交集运算或者并集运算,其中针对2个List集合的并集运算,可以使用Union方法来快速实现,Union方法的调用格 ...