javascript - 弹出窗口关闭后，弹出窗口中元素的 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>
...
...

最近我尝试将 CSS3 Transitions 集成到图像的 UI 中。根据功能，每个图像都有删除按钮，单击该按钮用户可以从系统中删除图像。为了添加一些动画，我添加了以下 CSS 类更改。

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

}

当用户点击关闭按钮时，我将图像分区的不透明度设置为 0，这给了它很好的效果。

然而问题开始了。当用户单击 YUI 面板的关闭按钮时，面板会隐藏，一旦隐藏，我发现图像的转换开始，然后在 1 秒后隐藏。面板关闭有点丑陋，之后只有图像再次出现在屏幕上并慢慢隐藏。

当然它必须对过渡做一些事情，因为在移除过渡后它工作得很好。因此，如果有人遇到过它或知道如何解决它，请提供您的意见。

Answer 1

也许更有创意的 CSS 规则以及一些 YUI 配置会奏效。

不幸的是，我不了解 YUI，但我的想法是在面板“关闭之前”在容器 div 上设置一个类，并在它完全关闭后将其删除。将类(class)称为“关闭”或类似的。

例如在伪代码中:

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