En mi aplicación estoy animando la opacidad de los elementos en la página con algo como:

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

(con versiones específicas del proveedor, por supuesto). Y entonces

.s.hidden {
    opacity: 0;
}

Así que la animación comienza cuando elhidden la clase esta asignada El problema es que los eventos del mouse aún se detectan en elementos con opacidad cero, que no quiero, por lo que necesito configurarvisibility ahidden odisplay anone después La transición está terminada. Espero poder hacer algo como:

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

y entonces

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

para utilizar la maquinaria de transición CSS para hacer esto sin dolor. Por lo que puedo decir, eso no funciona porquevisibility Es una propiedad no animable. Pero otros marcos de transición como d3hacer maneja las propiedades no animables, de la manera obvia simplemente estableciendo el valor cuando comienza la transición, o cuando termina.

Lo mejor que he podido encontrar es usar eltransitionend evento (y sus variantes específicas del navegador, tales comooTransitionEnd) para atrapar el final de la transición y establecervisibility en ese momento, pero me pregunto si hay alguna forma más fácil, preferiblemente apegándose únicamente a CSS. O, como lo indica el título de mi pregunta, ¿son propiedades no animables solo eso?