CODEWITHSUNDEEP
csscss-transitions
user736893
user736893

Reputation:

CSS transition repeat?

I'm designing a UI where you can select certain objects. When you do, an information pane slides out. Everything works great, except if you switch between items I want the animation to run again.

Here is the full codepen: http://codepen.io/ScottBeeson/pen/JGyDa

Here is the relevant CSS:

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

Here is the relevant JS:

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

Upvotes: 0

Views: 2357

Answers (3)

King King
King King

Reputation: 63317

Looks like removing the class does not result in hiding the div first as you expected. You can try using setTimeout to add the class outside the onclick event handler (after removing the class):

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

Updated demo.

The bind method may not be supported by some old browsers, try using $.proxy method of jQuery instead Demo.

Upvotes: 1

Karthik Naidu
Karthik Naidu

Reputation: 141

Here is the code -

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')
});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

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

Upvotes: 0

Related Questions