我正在尝试以下内容,但我根本没有收到回调
$("#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>
另请注意,您只需在 #Panel
元素上切换 showPane
类,即可使逻辑更简单(并完全无需挂钩到transitionEnded
。
$('#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>