jquery - 如何多次使用css transition？

Question

我对 CSS 转换有一种奇怪的行为。我想隐藏/显示具有过渡效果的图像。我设置了 html:

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

和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%;
}

现在，如果我使用 JQuery 来切换 wrapper_see 类，我可以显示/隐藏具有效果的图像。这是 fiddle用一个按钮来做到这一点。

当我想隐藏元素并在隐藏后将其添加到另一个 div 并显示时，问题就开始了。基本上我想将图像从 div 移动到 div 但具有过渡效果。

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

但是过渡效果在 prepentTo 之后没有反应。

花了几个小时但不明白为什么它适用于第一种方法但不适用于第二种方法。

Answer 1

因为您没有添加正确的类序列来正确执行转换。你想要的是高度最初为 0，不透明度为零，然后你想要设置高度，并设置你的不透明度以便发生过渡。

我 fork 了你的 fiddle 并解决了问题。如果您不明白我所做的，或者您有任何其他问题，请告诉我。

** 您需要对按钮处理程序执行相同的操作。现在代码有问题。

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