彈出窗口關閉後彈出窗口獲取觸發器的CSS過渡

Question

我正在使用YUI面板在ui上打開一些內容，其結構如下所示。我正在使用YUI面板淡入淡出效果來關閉時隱藏面板。

<div ... YUI panel related stuff> 
    <div class="hd" 
    <div class="bd" 
     <div class="someinformation" > 
     <div class="image"><img ... /><div> 
     <div class="image"><img ... /><div> 
     <div class="image"><img ... /><div> 
     <div class="image"><img ... /><div> 
... 
... 

Reecntly我曾試圖向CSS3過渡融入了圖像的UI。按照功能，每個圖像都有刪除按鈕，可以單擊哪個用戶可以從系統中刪除圖像。爲了添加一些動畫，我添加了以下CSS類更改。

.image{ 
    ... 
    ... 
    -moz-trnansition:all 1s; 
    ... 

} 

當用戶點擊關閉按鈕時，我將圖像分區的不透明度設置爲0，這是給它很好的效果。

然後問題開始。當用戶點擊關閉YUI面板的隱藏按鈕時，一旦它隱藏，我發現圖像的過渡開始，然後在1秒後隱藏。這是一種不高興的面板關閉，然後只有圖像再次出現在屏幕上，並慢慢隱藏。

當然，它必須做一些轉換，因爲在重新轉換之後它工作得很好。所以如果有人遇到了它或知道如何解決它，請給你的投入。

Answer 1

也許更有創意的CSS規則可以和一些YUI配置一起工作。

不幸的是，我不知道YUI，但我的想法是在面板關閉前在面板的容器div上設置一個類，並在面板完全關閉​​後將其刪除。召集類「閉幕」或類似的。

例如在僞代碼中：

YUI.Panel.setOptions({ beforeClose: function() { 
    thisYuiPanel.addClass('closing'); 
}, afterClose: function() { 
    thisYuiPanel.removeClass('closing'); 
}); 

然後在您的CSS中，只有CSS3動畫在面板未關閉的情況下運行。

.image { 
    ... 
    ... 
    -moz-transition:all 1s; 
    ... 
} 

.closing .image{ 
    -moz-transition:all 0s; 
}