请问老师为什么不会执行

老师不想不通为什么在点击show后在点击hide事件，不会触发shown事件

这个运行过程是什么样子的。

我的理解是点击显示触发show方法代码会依次执行对吧。虽然off了transitionend但是又会onetransitioned事件，仍然会触发onetransitioned事件。为什么不会执行shown？难道点击之后show之后的代码就停止执行了？

hy_wang 2018-10-23

源自：实战：电商网站下拉菜单 2-5 用css3实现淡入淡出效果（2）

收起

6回答

Miss路回答被采纳获得+3积分 2018-10-28 11:28:37

同学你好，看得出来你是个特别爱钻研的同学，非常棒！但是同学，我分析了一下你的问题，基本上都是关于底层的代码原理的，这个不太好理解，如果你实在是想不通，那暂时先不要纠结了，可以先把实现的流程记住，先学会怎么用，再研究原理，现在还没有学会怎么用呢，就先研究原理确实是有点难度。我特别理解你的渴望知识的心态，但是要一步一步来，欲速则不达。你可以先把这块的原理放一放，等学习完这块的内容，再来看看老师帮你做的分析，或许很容易就明白了。

加油！如果帮助到了你，欢迎采纳!

收起回答

提问者 hy_wang 2018-10-25 21:59:49

请问老师我有了新的理解同时又有了新的疑问，请老师指教

收起回答

好帮手慕星星 #1

建议同学不要想得那么复杂，可以看成是两个单纯的定时器执行，里面有不同的样式，一个定时器执行完毕之后，才能执行另一个定时器。

2018-10-26 11:30:18
提问者 hy_wang 回复好帮手慕星星 #2

不是，请问一下老师是不是说如果点击快了是不是就是会阻塞定时器的执行了，这不就会出现bug了吗

2018-10-27 19:32:53

好帮手慕星星 2018-10-25 09:58:12

你粘贴的:hover这个列子与视频中的show是不一样的，:hover是一个移入移出的动作，即使在移入的时候动画没有执行完毕，立即移出元素，也会恢复到原来的状态，并不会先执行完移入的动画。

而视频中的show：

可以在里面打印几个数字，将定时器的时长增加到500ms，出来的效果就是：

所以说明了是hide方法中off()将原来的transitionend事件给解除了，show中的动画是执行完毕的，并没有立即隐藏。

自己可以测试一下。

收起回答

提问者 hy_wang #1

请问那是不是说无论我点击隐藏的有多快，show的动画还是会在执行完毕之后才会隐藏。 Hover css中的动画和jquery中的动画实现原理不同是吗

2018-10-25 21:33:53
提问者 hy_wang #2

同时请问css中的transition过渡属性是否和jquery一致，加入队列异步等待执行

2018-10-25 22:02:30
好帮手慕星星回复提问者 hy_wang #3

是的，无论点击隐藏有多快，执行完show之后才会执行hide，是代码设置在定时器中的原因。css中的transition属性并不是异步的，因为:hover伪类就是一个动作，鼠标移入才会触发改变，鼠标移出就恢复原状，并不需要等待过渡执行完毕。

2018-10-26 09:50:05

点开查看后面1条评论

提问者 hy_wang 2018-10-24 14:36:37

请问老师我的理解正确吗，虽然不会触发shown但是仍然会完成之前的动画之后再隐藏

收起回答

好帮手慕星星 #1

可以这样理解，是hide事件中的off将之前的transitionend事件给清除了，也就是show中添加的事件，所以没有‘shown’输出。

2018-10-24 15:10:24
提问者 hy_wang 回复好帮手慕星星 #2

请问老师关于我的这个仍然会完成之前的动画之后再隐藏这句话对吗？我自己测试了如下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 500px; height: 500px; background: red; transition: all 20s; } div:hover{ width: 0px; } </style> </head> <body> <div id='one'></div> <script type="text/javascript"> console.log(one); var one={ two:'wang hao yu' }; console.log(one.two); // for(var p in one){ // console.log(one[p]); // } </script> </body> </html> 当鼠标移入的时候，他会慢慢变但是我在移入的过程中移出就会从当前状态变回去了而不是执行完一个动画之后才会执行另一个动画。请问老师关于代码中的show是不是同理，在show的同时立马点击hide是不是不必等show渲染完毕可以终止show到当前过程然后从当前过程开始隐藏？可是我在老师给的代码中并没有看到stop（）啊。请给我解释

2018-10-24 19:09:52
提问者 hy_wang 回复好帮手慕星星 #3

就是说关于transition的过渡，他是会在取消过渡的时候元素会停止在当前状态吗

2018-10-24 19:13:13