CSS转换重复?

时间:2014-06-09 17:23:45

标签: css css3 css-transitions

我正在设计一个可以选择某些对象的UI。执行此操作时,将滑出信息窗格。一切都很好,除非你在我希望动画再次运行的项目之间切换。

以下是完整的代码: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')
})

3 个答案:

答案 0 :(得分:1)

看起来删除类不会导致首先隐藏div,如预期的那样。您可以尝试使用setTimeoutonclick事件处理程序之外添加类(删除类之后):

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

答案 1 :(得分:0)

<强> jsBin demo

<div id="info">Box ? is selected</div>

<div id="items">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

#items div {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  margin: 10px;
  text-align: center;
  line-height: 50px;
}
#info {
  position:fixed;
  z-index:2;
  width:100%;
  top:-50px;
  left:0;
  background:gold;
  padding:5px 0;
  overflow: hidden;
  text-align: center;
  color: blue;
}

var $info = $('#info'), // Cache your elements you plan to reuse over and over.
    infoOrgTop = parseInt( $info.css('top'), 10 ), // Get org top position
    infoTimeout = null; // Timeout to hide Info bar

function showinfo() {

  clearTimeout(infoTimeout); // Don't hide if we clicked another item

  $info.text( "Box "+ $(this).text() +" is selected" );
  $info.stop(0,1).animate({top: 0}, 400);
  infoTimeout = setTimeout(function(){
    $info.animate({top: infoOrgTop}); 
  }, 2000); // hide annoying gold bar after 2s

}

$('#items div').on('click', showinfo);

答案 2 :(得分:0)

这是代码 -

CSS -

#info {  
   position: absolute; 
   left: 75px; top: 0px;  
   width: 200px;  
   overflow: hidden;  
   text-align: center;  
   padding: 0px;  
   background-color: yellow;  
   color: blue;  
  display:none;
}

JQUERY -

$('#items div').on('click', function() {  
   $('#info').hide();  
   $('#info').slideDown(500).html('Box ' + $(this).html() + ' is selected')
});