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

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

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

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


html transition css
person mobileTofu    schedule 07.06.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

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

person Blender    schedule 07.06.2011
comment
пример (без селектора) - person mobileTofu; 07.06.2011
comment
В основном идея состоит в том, чтобы иметь 2 стиля (вам нужно явно установить свойства, которые вы хотите анимировать в каждом стиле) и назначить стиль, с которого начинается ваша анимация, целевому элементу. Затем при загрузке страницы вы прослушиваете событие transitionend для элемента, после чего назначаете стиль, которым хотите завершить анимацию. :) - person mobileTofu; 08.06.2011

arrow_upward
2
arrow_downward

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

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.

person kongr45gpen    schedule 07.06.2011
comment
Если вы не хотите нажать и удерживать, вы можете либо навести курсор мыши, либо использовать jQuery. Попробуйте это: jsfiddle.net/kongr45gpen/7J2M6/4 - person kongr45gpen; 07.06.2011
comment
Спасибо за код. Я думаю, вы используете селектор (hover/link/active/visited) для существующего диапазона; Я вижу, что это вызывает переходы. Мой вопрос заключался в том, можно ли инициировать переход при добавлении/удалении/замене стилей для элемента. - person mobileTofu; 07.06.2011

arrow_upward
1
arrow_downward

Для переходов/анимации: я бы использовал 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;}
person BumbleB2na    schedule 07.06.2011