ios 微信浏览器中 触发webkitTransitionEnd 问题

最新推荐文章于 2022-08-31 07:29:57 发布
原创 最新推荐文章于 2022-08-31 07:29:57 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文分享了一段在项目中遇到的技术挑战：在Chrome模拟器中正常触发webkitTransitionEnd事件，但在iOS微信浏览器中无法触发。通过将transition属性从针对transform单独修改为针对所有属性，成功解决了问题。分享此经验以帮助开发者避免类似时间的浪费。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

昨天做项目的时候发现了一个问题

  transition: transform .3s cubic-bezier(.53,.1,.81,.38);

  -webkit-transition: transform .3s cubic-bezier(.53,.1,.81,.38);

在chrome模拟器中可以正常触发webkitTransitionEnd 事件

但是在ios微信浏览器中无法触发webkitTransitionEnd 事件 

修改为

  transition: all .3s cubic-bezier(.53,.1,.81,.38);

  -webkit-transition:all .3s cubic-bezier(.53,.1,.81,.38);

后可以成功触发

有一处代码忘记修改，今晚又浪费了我两个小时，贴出希望大家能少在这里浪费时间



transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段
专研前端，探索后端
04-26 534
transitionend过渡监听事件： 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数，如下案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div {
audio在ios微信浏览器中不支持自动播放问题
GTraveler
12-07 6541
最近在开发微信公众号H5页面的时候，audio标签在ios系统上无法进行自动播放，最后发现audio在ajax回调中无法调用Play，所以查找很多资料终于解决了。 首先html中添加如下代码：html <audio id="bg-music" src="<{$Think.const.HIMG_PATH}>s.wav" preload="auto"> 您的浏览器不支持 audio 标签。 </
transitionend 事件
ssisse的博客
09-13 1753
transitionend 事件 定义和用法 transitionend 事件在 CSS 完成过渡后触发。 注意： 如果过渡在完成前移除，例如 CSS transition-property 属性被移除，过渡事件将不被触发。 更多关于 CSS 过渡，请查看我们的 CSS3 过渡。 语法 object.addEventListener("webkitTra
ios+透明度+css,iOS CSS opacity + visibility transition
weixin_42502089的博客
08-04 433
Only opacity on transition sucks.Since that on iPhone you need to tap in order to focus an element this is how I've fixed my problem:.mydiv {visibility:hidden;opacity: 0;transition: all 1s ease-out;-w...
transitionend animationend 事件兼容问题
lz305263的博客
06-16 8025
平时在做动画的时候，如果涉及交互比较多一些的时候。比如像拆礼盒，摇筛子等基于微信的小游戏，transitionend和animationend这个两个事件都会用到，之前做微信的小游戏过程中，把两个事件在pc端和移动端的常用的浏览器给测试了一下并做了整理，虽然浏览器的支持结果大同小异，但是还是有一些细微的差别的，其中微信和qq浏览器（其实是同一个）对于两个事件都需要加前缀！ 一、transit
transitionend 监听transition动画停止 优化性能
Embrace924的博客
08-14 1237
问题： 当有动画切换页面的时候 同时切换后的页面会进行大数据量的图表渲染 组合在一起 导致动画卡顿 方案： 监听动画结束在进行图表渲染 getTransitions() { let t; for (t in this.transitions) { // t即transition，OTransition，MozTransition，WebkitTransition if (this.
ios微信浏览器返回不刷新问题完美解决方法
08-29
iOS 微信浏览器返回不刷新问题是开发者常遇到的问题之一，该问题的解决方案将在本文中详细介绍。 什么是 iOS 微信浏览器返回不刷新问题？ iOS 微信浏览器返回不刷新问题是指在 iOS 设备上使用微信浏览器时，用户...
iOS微信浏览器回退不刷新实例(监听浏览器回退事件)
01-03
iOS在微信浏览器回退是不重新加载页面的，有些时候是需要重新加载的，所以需要监听回退事件 $(function(){ pushHistory(); }); function pushHistory(){ window.addEventListener(popstate, function(e){ alert&...
深入理解CSS过渡transition
51yunOA
04-12 584
https://www.cnblogs.com/xiaohuochai/p/5347930.html 前面的话 　　通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识 定义 　　过渡transition是一个复合属性，包...
微信小程序开发
ximingx
08-31 2068
微信小程序
transitionend事件
qq_44850230的博客
09-06 283
案例： //过渡完成后 再去判断 监听过渡完成的事件 ul.addEventListener('transitionend', function() { //无缝滚动 if (index >= 3) { index = 0; ul.style.transition = 'none'; var translateX = -index * w; ul.style.tran
判断transition是否结束的事件transitionend
weixin_43269800的博客
01-12 1321
检测过渡是否完成 当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd 每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件） 在transition完成前设置 display: none，事件同样不会被触发 ...
IOS下Safari渲染Transition时页面闪动Bug
caibinghong的专栏
05-17 2205
http://classjs.com/category/technology/css/   环境：IOS的Safari环境 问题：在做移动端左右滑动的时候，用到了CSS3的Transition属性来进行动画变换，结果每次渲染Transition属性时，出现闪屏现象。 解决办法：在网上查了一下，有一下两种解决办法， 方法一： 1 -webkit-transform...
手机web端页面加载时自动播放背景音乐
热门推荐
scorpio的世界
06-14 1万+
在pc端上直接在body里写个video就可以了，很简单 但是移动端不一样，移动端禁用所有的自动播放音乐，必须手动触发，但是我们可以巧妙绕过这个设定 1、在html上新建个容器，其实不要也可以，我只是喜欢规范点 2、用js加载页面时把video元素append进去就行了，我还额外做了一个浏览器每次打开只会播放一次的功能，不然每次用户选择该页面都会播放用户难免烦躁
解决 iOS webkit 使用CSS动画时闪烁的问题
weixin_30376323的博客
07-22 1416
-webkit-backface-visibility: hidden; 转载于:https://www.cnblogs.com/rubekid/p/4666422.html
JS学习47：transitionend 事件的折腾
wonder
11-14 3984
1、引子 如上，单击方块的运行结果应该是什么呢？在高级浏览器下测试的结果是：1、2，符合预期。 通常，dom元素上的事件名称，比如“onclick、onmousedown”是与事件监听的事件名称是一一对应的，只是省略了“on”。于是： 如上，ontransitionend 是监听 css3 中 transition 过渡结束的事件，相关链接可以阅读参考链接。实际运
ios微信浏览器底部返回按钮隐藏
最新发布
08-30
IOS微信浏览器底部返回按钮隐藏是因为在IOS系统中，微信浏览器已经集成了系统自带的导航栏，并且其设计理念是以用户体验为重，因此避免了重复的返回按钮出现在页面的底部。 IOS微信浏览器底部返回按钮的隐藏，主要有以下几个原因： 1. 统一的导航栏设计：为了提供更一致的用户体验，IOS系统在设计中统一了导航栏的样式和功能。通过将返回按钮放在导航栏左侧，可以方便用户在页面中进行导航操作，同时也减少了按钮的重复性。 2. 界面简洁美观：IOS微信浏览器注重简洁的设计风格，将返回按钮隐藏在导航栏上能够使界面更加整洁美观。隐藏底部返回按钮还能够提升页面的可视面积，使用户能够更好地浏览网页内容。 3. 手势操作：IOS系统提供了滑动手势来实现页面的返回功能。当用户在页面中向右滑动时，系统就会自动识别用户的操作，并执行返回上一页的命令。这种手势操作的方式更加符合用户的习惯，也能提高用户的操作效率。 综上所述，IOS微信浏览器底部返回按钮的隐藏主要是为了提供更一致的用户体验、简洁美观的界面和方便的手势操作。这样的设计能够满足用户对浏览器的需求，提高用户的使用体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值