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的类，并在它完全关闭后删除它。称该课程为“结束”或类似。

e.g。在伪代码中：

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

弹出窗口关闭后弹出窗口获取触发器中的元素的CSS转换

1 个答案: