长按之后按钮不会恢复 #11

Activity

1. soyaine commented on May 10, 2017

   

   soyaine

   on May 10, 2017

   Owner

   More actions

   @Liubara 请具体说明任务名称和编号
3. kanbykanby commented on May 30, 2017

   

   kanbykanby

   on May 30, 2017

   More actions

   removeTransition()里面直接写this.classList,remove('playing');就不会出现这种情况了，我也不知道为什么。。。。

   👍React with 👍1Reacted by S
4. Yanfei-Qiao commented on Jun 21, 2017

   

   Yanfei-Qiao

   on Jun 21, 2017

   Last edited by Yanfei-Qiao

   More actions

   我也遇到这个问题，但发现原因并不是this.classList或者event.target.classList，而是在过滤事件的代码中
   if (event.propertyName !== 'transform') return;
   这里如果是transform或者box-shadow就会出现长按样式不能恢复的情况；
   如果改成检测border-left-color或者其他几个边框颜色就不会出现这个问题。
   感觉原因是浏览器多过渡动画的优化导致的，在连续点击时不明显的动画就不执行了（反正也看不出来），以提高性能。在输出event.propertyName时，按住不放的输出如下：
   border-right-color0.07
   border-bottom-color0.07
   border-top-color0.07
   transform0.07
   border-left-color0.07
   box-shadow0.07

   border-right-color0.07
   border-bottom-color0.07
   border-top-color0.07
   transform0.07
   border-left-color0.07
   box-shadow0.07

   transform0.039687321288511164
   border-right-color0.039687321288511164
   border-bottom-color0.039687321288511164
   border-top-color0.039687321288511164
   border-left-color0.039687321288511164
   box-shadow0.039687321288511164

   border-right-color0.023046654416248202
   border-top-color0.023046654416248202
   border-left-color0.023046654416248202
   border-bottom-color0.023046654416248202

   另外在检测transform或者box-shadow属性时，如果将样式中的transition时间改长一些（我改的2s）也不会出现样式不恢复问题。

   👍React with 👍8Reacted by Mr.9X, CekerLee, luxf404, chen yao, Matthew W, YUTONG398, S and 宵夜
5. carwinlu commented on Oct 5, 2022

   

   carwinlu

   on Oct 5, 2022

   More actions

   在长按某个键之后松开样式没有恢复...

   是这样的！把监听transitionend 改成了监听“keyup”好像可以解决
6. Lcisegoist commented on Jul 30, 2025

   

   Lcisegoist

   on Jul 30, 2025

   Last edited by Lcisegoist

   More actions

   应该是如果最后一次transitionend是border-color其他变化就不会执行类的remove所以不会恢复，虽然一次keyup是以transform结尾但你松下键盘那一刻的事件不一定是transform