弹出窗口关闭后弹出窗口获取触发器的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; 
}