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的高度，不透明度为零，然后您要设置高度，并设置不透明度以便进行转换。

我分叉你的小提琴，解决了问题。如果您不了解我做了什么，或者您是否有任何其他问题，请告诉我。

**您需要对按钮处理程序执行相同操作。现在代码是错误的。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对于jQuery，您只需一步即可删除并添加类wrapper_see，因此删除操作不会真正发生。我通过延迟一毫秒来解决这个问题。

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

如何多次使用css过渡？

2 个答案: