Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ghost opened this issue May 10, 2017 · 5 comments
Open

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

ghost opened this issue May 10, 2017 · 5 comments

Comments

@ghost
Copy link

ghost commented May 10, 2017

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

@soyaine
Copy link
Owner

soyaine commented May 10, 2017

@Liubara 请具体说明任务名称和编号

@ghost
Copy link
Author

ghost commented May 10, 2017

第一个鼓点,在长按asdfghjkl等键松开之后样式木有清除...

@shezhangzhang
Copy link

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

@Yanfei-Qiao
Copy link

Yanfei-Qiao commented Jun 21, 2017

我也遇到这个问题,但发现原因并不是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)也不会出现样式不恢复问题。

@carwinlu
Copy link

carwinlu commented Oct 5, 2022

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

是这样的!把监听transitionend 改成了监听“keyup”好像可以解决

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants