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 ...
随机推荐
- 剑指offer59：按之字形顺序打印二叉树：[[1], [3,2], [4,5,6,7]]
1 题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 2 思路和方法 先给定一个二叉树的样式: ...
- stm32f103的HSI设置
HSI基本知识 HSI是8MRC震荡电路,精度1%. PLL的设置必须在其被激活前完成,输出必须被设置温48M或者72M LSE:通过在备份域控制寄存器(RCC_BDCR)里的LSEON位启动和关闭. ...
- DG环境恢复同步遇到报错ORA-00353ORA-00334以及ORA-00600[2619], [47745]
问题说明 客户环境主库4节点RAC11.2.0.4,单实例DG环境,DG由于空间不足,导致同步中断,由于DG备库未应用的归档主库都再,本次恢复的方式,是开启dg mrp进程,自动同步追上主库. 以下遇 ...
- nodejs中使用mongodb
/** * 使用mongodb存储数据 * 1 首先安装mongodb nodejs插件 npm install mongodb --save-dev * 2 安装express (非必须) * * ...
- .NET Standards
.net的创始者们在一开始的时候,就意识到了他们的编程技术可以用在不通的操作系统和不同类型的cpu上.他们改进了20世纪90年代编程语言实现技术.最主要的一条是,不同的编程语言对应统一个运行时,及CL ...
- 关于Vue-ElementUI修改默认样式不成功问题解决
Element是一个很好用的组件库,但是有时候我们需要修改一些组件的样式以满足我们自己的需求. 我们用浏览器调试找到相应的class,在本地重写这个class时,发现修改不成功. 这是因为在Vue文件 ...
- html5细线表格制作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- angular-cli 引入ui组件库
该例中使用的admin-lte以及bootstrap 1.使用npm 安装admin-lte命令: npm install admin-lte --save (--save的意思是将该以来写入到pa ...
- Python面向对象Day2
一.组合 给一个类的对象分组一个属性,这个属性是另一个类的对象 意义:让类的对象与另一个类的对象产生关系,也叫类与类之间产生关系(继承也能) 好处: ① 让两个类之间产生关系 ② 某一个对象是独立存在 ...
- C++——同名隐藏 和 赋值兼容规则
同名隐藏 一旦子类定义了与父类同名的方法,则父类里面该名字的所有方法都被隐藏了.必须显示指定是父类的方法才可以 #include<iostream> using namespace std ...