En
este enlace puedes ver una lista de propiedades CSS que pueden ser afectadas por el efecto de transición. Como podrás ver, la propiedad
display no aparece.
Off-topic:
Aunque es un tema netamente de CSS y no de jQuery o, para referirnos al lenguaje, de JavaScript, te aconsejo que trabajes con la propiedad
opacity. Lo que suelo hacer es lo siguiente:
Para mostrar al elemento:
1. Le aplico el par atributo-valor
display: {block, inline, inline-block, etc.};.
2. Le asigno el valor 1 al atributo
opacity.
Para ocultar al elemento:
1. Le asigno el valor 0 al atributo
opacity.
2. Usando un
temporizador, establezco el mismo tiempo del valor del atributo de transición pero en milésimas de segundo (así trabaja el temporizador) y, en la función que ejecutará al completarse el tiempo, establezco el par atributo-valor
display: none;.
