文档章节

transitionend事件 监听 fadeIn fadeOut 两个方法无效(动画结束时无法执行transitionend里面的代码)

o
 osc_g8254g7s
发布于 2019/08/19 20:19
字数 200
阅读 10
收藏 0

精选30+云产品,助力企业轻松上云!>>>

//下面的例子证明 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>

  

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CSS pointer-events属性的使用

楔子 在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似native的感觉。其中动画是最常用的方法。 这里的需求是,弹层的设计,这个弹层希望可以像 native 上...

前端老手
2019/09/27
0
0
JS如何监听动画结束

场景描述 在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作,所以需要监听动画结束进行回调。JS提供了以下事件用于监听动画的结束,简单总结学习下。 CSS3动画监听事件 ...

Amor丶情深
2018/10/26
0
0
animationend和transitionend多次执行的问题解决方案

对于animationend事件来说的话,如果我们在外层添加这个事件监听,如果监听元素里面还有动画,则里面元素动画结束也会执行这个animationend事件。所以我们可以这样做: $('.ele').on('animat...

羽筠
06/23
0
0
【zepto学习笔记01】核心方法$()(补)

前言 在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能 以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能 当...

panpanhtai
2014/07/09
1.2K
0
监测c3动画过渡完成的事件

监测css3动画完成的事件 transitionend 用法: css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件 2014年08月16日 17:04:11 阅读数:59914 用css3的animation完成一个动画,当...

osc_o9gnlxa0
2018/05/01
1
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在控制器中使用过滤器? - How to use a filter in a controller?

问题: I have written a filter function which will return data based on the argument you are passing. 我编写了一个过滤函数,它将根据您传递的参数返回数据。 I want the same functi......

富含淀粉
今天
26
0
android:layout_weight是什么意思? - What does android:layout_weight mean?

问题: I don't understand how to use this attribute. 我不明白如何使用这个属性。 Can anyone tell me more about it? 谁能告诉我更多关于它的事情? 解决方案: 参考一: https://stacko...

javail
今天
17
0
CSS背景不透明度[重复] - CSS Background Opacity [duplicate]

问题: This question already has an answer here: 这个问题已经在这里有了答案: How do I give text or an image a transparent background using CSS? 如何使用CSS为文本或图像提供透明背...

fyin1314
今天
27
0
node http 获取gb2312网页如何转为utf8

最初,我想当然认为是下述做法,但被证明是错误的 const http = require('http'), iconv = require('iconv-lite');const url = 'http://xxx';http.get(url, function(res) { var bo......

高延
今天
24
0
动态规划:LC198.打家劫舍

题目描述: 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入...

曦鱼violet
今天
30
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部