How to use css transition multiple times?

Question

I have a strange behavior with css transitions. I want to hide/show an image with a transition effect. I set up html:

<div class="up">
     <div class="wrapper_hiden wrapper_see">
       <img src="">
     </div>
    ...
   </div>
   <div class="down">
   </div>

and css:

.wrapper_hiden{
  height: 0;
  float: left;
  margin: 0;
  opacity: 0;
  transition: all 1s;
  overflow: hidden;
}
.wrapper_see{
  height: 100px;
  margin: 5px;
  opacity: 1;
}
.wrapper_hiden img{
  height: 100%;
}

Now if I use JQuery to toggle wrapper_see class I can show/hide image with effect. Here is fiddle with a button to do that.

Problem start when I want to hide element and after hidden prepend it to another div and show. Basically I want to move image from div to div but with transition effects.

$('body').on('click', '.up .wrapper_hiden',function(){
    var $wrapper_hide = $(this);
    $wrapper_hide.removeClass('wrapper_see');
    $wrapper_hide.one('transitionend', function(e) {
            $(this).prependTo('.down').addClass('wrapper_see');
    });
  });

However transition efect is not reacting after prepentTo.

Have spent hours but can not understand why it works with first approach but dont with second.

Answer 1

For jQuery you remove and add your class wrapper_see in one step, so the removement doesn't really happen. I solved this solution by delaying for one ms.

        $('body').on('click', '.up .wrapper_hiden', function () {
            var $wrapper_hide = $(this);
            $wrapper_hide.removeClass('wrapper_see').delay(1).queue(function (next) {
                $wrapper_hide.one('transitionend', function (e) {
                    $(this).prependTo('.down').addClass('wrapper_see');
                });
                next();
            });
        });

Answer 2

Because you're not adding the correct sequences of classes to properly execute the transition. What you want is the height to initially be 0, and opacity be zero, THEN you want to set the height, and set your opacity so the transition takes place.

I forked your fiddle and solved the problem. Let me know if you don't understand what I did, or if you have any other problems.

** You need to do the same with your button handler. Right now the code is buggy.

$(document).ready(function(){
	$('body').on('click', 'button',function(){
  	$('.la').toggleClass('wrapper_see');
 });
	$('body').on('click', '.up .wrapper_hiden',function(){
  	var $wrapper_hide = $(this);
   	$wrapper_hide.removeClass('wrapper_see');
    $wrapper_hide.one('transitionend', function(e) {
			$(this).prependTo('.down').addClass('wrapper_hiden');
      setTimeout(function(){$wrapper_hide.addClass('wrapper_see')}, 0);
    });
  });
  $('body').on('click', '.down .wrapper_hiden',function(){
  	var $wrapper_hide = $(this);
   	$wrapper_hide.removeClass('wrapper_see');
    $wrapper_hide.one('transitionend', function(e) {
			$wrapper_hide.prependTo('.up').addClass('wrapper_hiden');
      setTimeout(function(){$wrapper_hide.addClass('wrapper_see')}, 0);
    });
  });
});

.up{
  position: relative;
  background: yellow;
  height: 120px;
}
.down{
  background: red;
  height: 120px;
}
.wrapper_hiden{
  height: 0;
  float: left;
  margin: 0;
  opacity: 0;
  transition: all 1s;
  overflow: hidden;
}
.wrapper_see{
  height: 100px;
  margin: 5px;
  opacity: 1;
}
.wrapper_hiden img{
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>press</button>
<div class="up">
  <div class="wrapper_hiden wrapper_see">
    <img src="http://www.w3schools.com/css/img_fjords.jpg">
  </div>
  <div class="wrapper_hiden la">
    <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg">
  </div>
  <div class="wrapper_hiden wrapper_see">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOLu1xsB5p3fYIGSG06rWNOXau_UJRm5Kx7EqDKibwolZq9U_g">
  </div>
  <div class="wrapper_hiden wrapper_see">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS7OateqmmWaL3DvIB83FktVJ2JL6cDOYRoxTol45tAi_9ee4av">
  </div>
</div>
<div class="down">
</div>