JS/CSS：transitioned事件值得注意的地方

最新推荐文章于 2021-11-02 15:25:51 发布
最新推荐文章于 2021-11-02 15:25:51 发布
阅读量708 收藏
点赞数
分类专栏： javascript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21522331/article/details/108149858
版权

1.transitioned事件是双向的，动画完成或者动画回归最初状态都会触发transitioned事件

2.transitioned事件只有在有过渡时间且过渡时间不为0时才会触发

3.在父元素身上添加transitioned事件，子元素的动画结束或回归最初状态时，也会触发该transitioned事件。若不想某个子元素触发父元素的transitioned事件，则在子元素的transitioned事件函数内部添加e.stopPropagation();使该事件停止冒泡即可。

4.由于每个动画的持续时间有可能是不一样的，若想精确到某个具体的动画结束，那就使用事件委托来判断每次事件对象中的elapsedTime来判断持续时间，原生事件委托的介绍下面这片文章介绍的很不错
https://davidwalsh.name/event-delegate

ArthurHsing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件触发css 动画,js处理css3 transitionend和animationend动画事件
weixin_33308577的博客
08-03 994
之前的文章中已经测试了transform、transitionend、animationend在移动和pc端浏览器的前缀的兼容问题((针对pc和移动浏览器的前缀问题),如果知道了兼容问题，下面的代码就可以很好理解，现在整理了一下，写成一个简单的原声js函数，这个函数方法有：1、addTranEvent(elem,fn,duration)：用于绑定transtionend事件，处理掉多次执行的问题...
09-transition
冰霜的博客
08-31 308
CSS过渡-Transitions CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。 要实现这一点，必须规定两项内容： 1.指定要添加效果的CSS属性 2.指定效果的持续时间。 CSS transitions 可以决定哪些属性发生动
CSS3过渡延迟总结
chen__cheng的博客
05-12 2571
CSS3过渡延迟总结1. 元素状态2. 过渡实现2.1 设置哪些属性应用过渡效果2.2 js过渡完成事件监听API2.3 设置过渡时间2.4 控制过渡效果的速度2.4.1 平滑过渡2.4.2 步进过渡2.5 设置过渡延迟时间2.6 过渡组合写法 一般情况下CSS属性的变化是瞬时变化的，但是CSS过渡可以控制变化效果，让变化平滑发生。 但是并不是所有的CSS属性都有过渡效果，具有过渡效果的CSS属性有：支持动画的CSS属性 一般具有中间值的属性有过渡效果，比如：宽度，因为宽度属性值是数值类型，元素宽度从100
js使用transition效果实现无缝滚动
icontent
11-02 670
转自：js使用transition效果实现无缝滚动作者：李大雷来源：SegmentFault 思否社区前言无缝轮播一直是面试的热门题目，而大部分答案都是复制第一张到最后。诚然，这种方法是非常标准，那么有没有另类一点的方法呢？第一种方法是需要把所有图片https://www.pinlue.com/article/2020/09/0916/5311219316405.html ...
关于js事件冒泡之transitionend
qq_37067705的博客
05-01 2416
今天在写一个小页面的时候，为了让form组件好看一点，特意添加了border过渡效果，代码如下： 代码很简单，就是hover时，会有颜色过渡，其实这没有什么问题，但是这个dom的顶层dom也添加了transitionend事件，结果就悲剧了，多说无益，上图： html： js： 自己封装的js方法： 该方法原理：trigger('show')去掉.hide，然后opa
transitionend animationend 事件兼容问题
lz305263的博客
06-16 7838
平时在做动画的时候，如果涉及交互比较多一些的时候。比如像拆礼盒，摇筛子等基于微信的小游戏，transitionend和animationend这个两个事件都会用到，之前做微信的小游戏过程中，把两个事件在pc端和移动端的常用的浏览器给测试了一下并做了整理，虽然浏览器的支持结果大同小异，但是还是有一些细微的差别的，其中微信和qq浏览器（其实是同一个）对于两个事件都需要加前缀！ 一、transit
niflheim:轻松动画安装卸载 React 组件
05-29
选择是通过 css transition属性还是通过 css animation ，并使用相应的 Niflheim 组件来包装要设置动画的子项（ Transitioned vs Animated ）。 与安装转换的所有实现一样：所有孩子都需要一个独特的有意义的key ...
前端项目-machina.js.zip
09-02
2. **事件驱动**：machina.js允许通过触发事件来触发状态转换，这与现代前端框架如React和Vue的事件处理机制相吻合。 3. **回调函数**：每个状态转换都可以关联一个或多个回调函数，这些函数会在进入、离开状态时...
angular-phonecat-components:这是使用基于 AngularAtom 组件的组织结构和 AngularUI 路由器重写的 angular 教程应用程序
07-06
'phones' // abstract state, can't be transitioned to 2. 'phones.list' // UI shows a list of all phones 3. 'phones.detail' // UI shows detail info on the selected phone | phones | // <-- abstract ...
【英文】凯捷研究院报告：解锁工作未来式
03-21
When we asked executives about the functions that can be transitioned with relative ease to remote working, IT/digital was the top ranked followed by customer service (see Figure 3). In the half ...
【英文】瑞信报告：全球股票策略报告：新冠病毒
03-26
Housing remains absolutely central to the Chinese economy, especially so as the economy has transitioned from investment-led growth towards consumption-driven growth. The concern we have is that ...
JS学习47：transitionend 事件的折腾
wonder
11-14 3781
1、引子 如上，单击方块的运行结果应该是什么呢？在高级浏览器下测试的结果是：1、2，符合预期。 通常，dom元素上的事件名称，比如“onclick、onmousedown”是与事件监听的事件名称是一一对应的，只是省略了“on”。于是： 如上，ontransitionend 是监听 css3 中 transition 过渡结束的事件，相关链接可以阅读参考链接。实际运
动画完成后触发处理事件（animationend）和过渡效果完成后触发处理事件（transitionend）
祥哥的说
12-10 4924
animationend 事件在 CSS 动画完成后触发。 CSS 动画播放时，会发生以下三个事件： animationstart - CSS 动画开始后触发 animationiteration - CSS 动画重复播放时触发 animationend - CSS 动画完成后触发 语法 object.addEventListener("webkitAnimationEnd", myS...
CSS3之过渡及过渡事件
努力，追梦的博客
05-02 4609
CSS3之过渡及过渡事件 1.      Transition过渡   l  transition-property  要运动的样式  （all || [attr] ||none） l  transition-duration 运动时间 l  transition-delay 延迟时间 l  transition-timing-function 运动形式 •      ease：（
addEventListener("transitionend", ()=>{...})方法回调函数执行多次问题
林凡_g的博客
11-13 4163
今天在使用vue写plugin的时候 遇到一个问题，在dom对象调用$el.addEventListener("transitioned", ()=>{})方法时，回调中的函数会执行多次，后来发现是因为transition中的变化值有多个，因此会执行多次回调函数。 解决方法如下:let flag = false; $el.addEventListener('transitionend',(e)=>
addEventListener事件监听使用匿名函数作为回调函数的问题
Alcantara的博客
06-01 3351
addEventListener事件监听绑定匿名函数，不能用removeEventListener解除绑定，JS认为这不是对应的那个函数。 因此，如果多次执行addEventListener（例如addEventListener事件绑定写在在mousemove事件内），使用匿名函数作为回调函数就是进行了多个函数的绑定，触发事件时会执行多次；具名函数则是绑定的唯一这个函数，触发时只执行一次。...
addEventListener() 事件监听
热门推荐
boysky0015的博客
06-14 3万+
无意间有人问到了，这个方法，我就学了一下，顺便敲了一个小demo。 addEventListener() 用于向指定元素添加事件。 可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。 语法： element.addEventListener(event,fn,useCaption ); 参数说明：tr件，比如 click mouseenter mouseleave
transitionend 事件
ssisse的博客
09-13 1690
transitionend 事件 定义和用法 transitionend 事件在 CSS 完成过渡后触发。 注意： 如果过渡在完成前移除，例如 CSS transition-property 属性被移除，过渡事件将不被触发。 更多关于 CSS 过渡，请查看我们的 CSS3 过渡。 语法 object.addEventListener("webkitTra
[js] JavaScript常见的事件类型
qq_14993591的博客
09-08 306
浏览器的事件类型 window 绑定的 scroll 页面滚动监听事件 resize 视窗窗口大小监听事件 load html加载事件 DOM操作 标签绑定的事件 点击类 click 鼠标左键单击 dblclick 鼠标左键双击 contextmenu 鼠标右键单击
do { rc = smblib_read(chg, TYPE_C_STATUS_4_REG, &stat); if (rc < 0) { smblib_err(chg, "Couldn't read TYPE_C_STATUS_4 rc=%d\n", rc); goto try_sink_exit; } debounce_done = stat & TYPEC_DEBOUNCE_DONE_STATUS_BIT; vbus_detected = stat & TYPEC_VBUS_STATUS_BIT; /* Successfully transitioned to ATTACHED.SNK */ if (vbus_detected && debounce_done) { exit_mode = ATTACHED_SINK; goto try_sink_exit; } /* * Ensure sink since drp may put us in source if other * side switches back to Rd */ sink = !(stat & UFP_DFP_MODE_STATUS_BIT); usleep_range(1000, 2000); } while (debounce_done && sink);代码分析
最新发布
06-08
这段代码是一个在Type-C设备中用于尝试作为sink的函数的主要实现部分。代码主要是通过读取Type-C状态寄存器中的状态位信息，来判断当前Type-C设备是否可以作为sink并进行后续的操作。 具体来说，代码首先通过使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值