CSS 过渡重复？

Question

我正在设计一个用户界面，您可以在其中选择特定对象。当您这样做时，会滑出一个信息 Pane 。一切正常，除非您在元素之间切换我希望动画再次运行。

这是完整的代码笔:http://codepen.io/ScottBeeson/pen/JGyDa

这是相关的 CSS:

#info.show {
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

这是相关的 JS:

$('#items div').on('click', function() {
  $('#info').removeClass('show').addClass('show').html('Box ' + $(this).html() + ' is selected')
})

Answer 1

看起来删除类并没有像您预期的那样首先隐藏 div。您可以尝试使用 setTimeout 将类添加到 onclick 事件处理程序之外(在删除类之后):

$('#items div').on('click', function() {
  $('#info').removeClass('show');
  setTimeout(function(){
               $('#info').addClass('show')
                         .html('Box ' + $(this).html() + ' is selected')
            }.bind(this),1);
})

Updated demo.

某些旧浏览器可能不支持bind 方法，请尝试使用jQuery 的$.proxy 方法 Demo 。