如何多次使用css轉換？

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

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

Answer 2

因爲您沒有添加正確的類序列來正確執行轉換。你想要的是最初的高度爲0，不透明度爲零，然後你想設置高度，並設置你的不透明度，以便過渡發生。

我分叉你的小提琴並解決了問題。如果您不明白我做了什麼，或者您有任何其他問題，請告訴我。

**您需要對按鈕處理程序執行相同操作。現在的代碼是越野車。

$(document).ready(function(){ 
 
\t $('body').on('click', 'button',function(){ 
 
    \t $('.la').toggleClass('wrapper_see'); 
 
}); 
 
\t $('body').on('click', '.up .wrapper_hiden',function(){ 
 
    \t var $wrapper_hide = $(this); 
 
    \t $wrapper_hide.removeClass('wrapper_see'); 
 
    $wrapper_hide.one('transitionend', function(e) { 
 
\t \t \t $(this).prependTo('.down').addClass('wrapper_hiden'); 
 
     setTimeout(function(){$wrapper_hide.addClass('wrapper_see')}, 0); 
 
    }); 
 
    }); 
 
    $('body').on('click', '.down .wrapper_hiden',function(){ 
 
    \t var $wrapper_hide = $(this); 
 
    \t $wrapper_hide.removeClass('wrapper_see'); 
 
    $wrapper_hide.one('transitionend', function(e) { 
 
\t \t \t $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>