如何获得css3过渡结束的回调？

Question

我正在尝试以下内容，但我根本没有回复

$("#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>

Answer 1

问题是因为您只检查#panel在加载页面时是否具有close_wiki类 - 在按钮点击时添加它时永远不会触发。

而是挂起transitionEnded事件onload并等待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>

Answer 2

你需要不要在页面加载和基于它的绑定事件上为close_wiki类做chekc。由于此类是在close_wikipedia上动态添加的。单击close_wiki时，可以使用事件委托来实现转换事件的回调。

＆＃13;

＆＃13;

$("#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");
  });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;