[英]How to get a callback for css3 transition end?
我正在尝试以下操作,但根本没有回调
$("#panel").addClass("showPane"); $("#close_wikipedia").on("click", function() { $("#panel").addClass("close_wiki"); }); if ($("#panel").hasClass("close_wiki")) { $(this).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() { $("#panel").removeClass("close_wiki showPane"); }); }
#panel { position: fixed; background: #444; height: 100%; width: 50vw; right: -100vw; transition: right 0.4s ease-in-out; -o-transition: right 0.4s ease-in-out; -ms-transition: right 0.4s ease-in-out; -moz-transition: right 0.4s ease-in-out; -webkit-transition: right 0.4s ease-in-out; z-index: 9999; top: 0; bottom: 0; height: 100vh; overflow-y: auto; } #panel.showPane { right: 0; } #panel.close_wiki { right: -100vw; transition: right 0.4s ease-in-out; -o-transition: right 0.4s ease-in-out; -ms-transition: right 0.4s ease-in-out; -moz-transition: right 0.4s ease-in-out; -webkit-transition: right 0.4s ease-in-out; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="panel"> <h2>Wikipedia results</h2> <div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div> <button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button> </div>
问题是因为您仅在页面加载时检查#panel
是否具有close_wiki
类-当单击按钮添加时,它将永远不会触发。
相反,将transitionEnded
事件挂载到钩子上,并等待CSS转换完成后触发它。 另请注意,不建议使用bind()
。 您应该使用on()
代替。 尝试这个:
$("#close_wikipedia").on("click", function() { $("#panel").removeClass("showPane"); });
#panel { position: fixed; background: #444; height: 100%; width: 50vw; right: -100vw; transition: right 0.4s ease-in-out; -o-transition: right 0.4s ease-in-out; -ms-transition: right 0.4s ease-in-out; -moz-transition: right 0.4s ease-in-out; -webkit-transition: right 0.4s ease-in-out; z-index: 9999; top: 0; bottom: 0; height: 100vh; overflow-y: auto; } #panel.showPane { right: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="panel" class="showPane"> <h2>Wikipedia results</h2> <div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div> <button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button> </div>
还要注意的是,你可以让逻辑更简单(和删除需要勾transitionEnded
,只需切换的所有showPane
的阶级#Panel
元素。
$('#panel').addClass('showPane'); $("#close_wikipedia").on("click", function() { $("#panel").removeClass("showPane"); });
#panel { position: fixed; background: #444; height: 100%; width: 50vw; right: -100vw; transition: right 0.4s ease-in-out; -o-transition: right 0.4s ease-in-out; -ms-transition: right 0.4s ease-in-out; -moz-transition: right 0.4s ease-in-out; -webkit-transition: right 0.4s ease-in-out; z-index: 9999; top: 0; bottom: 0; height: 100vh; overflow-y: auto; } #panel.showPane { right: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="panel"> <h2>Wikipedia results</h2> <div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div> <button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button> </div>
您无需在页面加载和基于它的绑定事件时检查close_wiki类。 由于此类是在close_wikipedia单击上动态添加的。 您可以使用事件委托来在单击close_wiki时实现对过渡事件的回调。
$("#panel").addClass("showPane"); $("#close_wikipedia").on("click", function() { $("#panel").addClass("close_wiki"); }); $(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",".close_wiki", function() { alert("called"); $("#panel").removeClass("close_wiki showPane"); });
#panel { position: fixed; background: #444; height: 100%; width: 50vw; right: -100vw; transition: right 0.4s ease-in-out; -o-transition: right 0.4s ease-in-out; -ms-transition: right 0.4s ease-in-out; -moz-transition: right 0.4s ease-in-out; -webkit-transition: right 0.4s ease-in-out; z-index: 9999; top: 0; bottom: 0; height: 100vh; overflow-y: auto; } #panel.showPane { right: 0; } #panel.close_wiki { right: -100vw; transition: right 0.4s ease-in-out; -o-transition: right 0.4s ease-in-out; -ms-transition: right 0.4s ease-in-out; -moz-transition: right 0.4s ease-in-out; -webkit-transition: right 0.4s ease-in-out; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="panel"> <h2>Wikipedia results</h2> <div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div> <button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.