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 ...
随机推荐
- 《Mysql - 如何恢复和避免误删除？》
一:误删数据 (如何恢复和避免误删除) - 使用 delete 语句误删数据行: - 使用 drop table 或者 truncate table 语句误删数据表: - 使用 drop databa ...
- 快速搭建ssh项目
环境:oracle11g.myeclipse2014 首先在web项目中添加spring框架 现在已经添加完spring框架了 然后我们开始添加Hibernate框架 到这一步Hibernate框架就 ...
- Android广播机制——初体验
写在前面的话 文章为笔者自己理解 . -如有错误,欢迎指正- <第一行代码>读书笔记 写于2017年10月16日17:00:40 (一). 安卓广播的分类 a.标准广播 标准广播发出以后, ...
- CTeX 更改字体（软件）
CTeX默认显示字体太小了,写起来看着费眼睛.有没有办法更改字体呢? 更改字体方法:(图片是默认字体) 未完 ...... 点击访问原文(进入后根据右侧标签,快速定位到本文) </b
- nodejs的安装与npm的介绍
Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.本文详细介绍了No ...
- 【HC89S003F4开发板】 2调度器
HC89S003F4开发板调度器调试 一.前言 逛论坛看到有人给HC89做了调度器,调度部分直接操作堆栈的. 下载链接 下载下来调试看看. 二.用户代码 @实现效果 编译后led灯闪烁 #includ ...
- c++实现双端队列
在使用c++容器的时候其底层如何实现 例如 vector 容器 :是一个内存可以二倍扩容的向量容器,使用方便但是对内存要求严格,弊端明显 list 容器 : 双向循环链表 deq ...
- 禁止服务向 eureka 上注册配置文件
### 禁止向注册中心注册服务eureka.client.register-with-eureka=false
- markdown语法之列表与缩进
在markdown语法中, 用*或+或-在行首表示无序列表.在这些符号之后应该空一格然后输入内容. 例如 + 无序列表 * 无序列表 - 无序列表 会被markdown语法渲染为 无序列表 列表嵌套 ...
- ABP 基于DDD的.NET开发框架 学习（二）创建实体
1.创建模型类打开.Core项目,新建新建一个项目文件夹(Demo);为了演示表关联及外键的使用,创建两个类:创建类ClothesCategoty.csusing Abp.Domain.Entitie ...