CSS-переходы для элементов во всплывающем окне, получающие триггеры после закрытия всплывающего окна.

Question

Я использую панель YUI для наложения некоторого содержимого на пользовательский интерфейс, структура которого выглядит примерно так, как показано ниже. Я использую эффект исчезновения панели 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 в пользовательский интерфейс для изображений. По функциональности у каждого изображения есть кнопка удаления, по которой пользователь может удалить изображение из системы. Чтобы добавить анимацию, я добавил следующие изменения класса 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;
}