В моем приложении я анимирую непрозрачность элементов на странице примерно так:

.s {
    transition-property: opacity;
    transition-duration: 250ms;
}

(с версиями для конкретного поставщика, конечно). А потом

.s.hidden {
    opacity: 0;
}

Таким образом, анимация начинается, когдаhidden класс назначен. Проблема в том, что события мыши по-прежнему обнаруживаются на элементах с непрозрачностью ноль, чего я не хочу, поэтому мне нужно либо установитьvisibility вhidden или жеdisplay вnone after переход закончен. Я надеюсь, что смогу сделать что-то вроде:

.s {
    transition-property: opacity, visibility;
    transition-duration: 250ms;
    transition-delay:    0, 250ms;
}

а потом

.s.hidden {
    opacity: 0;
    visibility: hidden;
}

использовать механизм перехода CSS, чтобы сделать это безболезненно. Насколько я могу судить, это не работает, потому чтоvisibility неанимируемое свойство Но другие переходные рамки, такие как d3do обрабатывать неанимируемые свойства очевидным способом, просто устанавливая значение, когда переход начинается или когда он заканчивается.

Лучшее, что я смог придумать, - это использоватьtransitionend событие (и его специфичные для браузера варианты, такие какoTransitionEnd) чтобы поймать конец перехода и установитьvisibility в этот момент, но мне интересно, есть ли какой-нибудь более простой способ, предпочтительно придерживаться исключительно CSS. Или, как видно из названия моего вопроса, неанимируемые свойства - это просто?