CSS3 переход / анимация для div добавлены / удалены / стиль изменен?

Question

Есть ли способ иметь CSS3 переходы / анимации для div, который только что был добавлен в окно или удален из него или ему назначен стиль? Одним из сценариев может быть элемент управления вкладкой, в котором содержимое имеет переходы при нажатии на заголовок вкладки; Обычно это делается путем назначения другого стиля CSS для div, который содержит контент (без перехода), который вы хотите отобразить:

    tabs-content > div{display:none;}
    tabs-content > div.active{display:block;}

Мне пришло в голову, что в большинстве примеров используются CSS3-переходы, инициируемые: hover.

Answer 1

Попробуйте это:

tabs-content > div{
    opacity:0;
    -moz-opacity:0;
    -webkit-opacity:0;
    transition-duration:1s;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
}
tabs-content:active > div{
    opacity:1;
    -moz-opacity:1;
    -webkit-opacity:1;
}

Вы можете увидеть это в прямом эфире на jsFiddle .

Answer 2

Для переходов / анимаций: Я бы использовал jQuery, потому что вы можете делегировать события элементам, которые еще не были созданы. У вас также есть больший контроль, и если вы добавляете / удаляете элементы с помощью jQuery, вы можете добавить анимацию одновременно.

CSS:

.elementInactive {
    display:none;
} 

JQuery:

$('tabs-content > div').hover(function() {
    $(this).toggleClass('elementInactive');
});

Для замены одного стиля на другой (не анимацию): Я бы использовал свойство css ':hover. Поддержка этого свойства восходит задолго до CSS3, поэтому это безопасное решение. IE имеет проблемы с использованием элемента 'div' с: hover, поэтому используйте элемент 'a' с display: block, чтобы рассматривать его как div:

CSS:

tabs-content > a:hover {display:block;}
tabs-content > a {display:none;}

Answer 3

CSS не может быть запущен таким образом. Вам придется использовать JavaScript, чтобы либо добавить класс к этому элементу и позволить CSS анимировать его (я сомневаюсь, что он будет работать), либо анимировать его напрямую с помощью JavaScript.

Я бы выбрал последнее.