¿Las transiciones CSS no funcionan?

Lo que estoy tratando de hacer aquí es obtener una transición cuando se coloca el cursor sobre este div.

Todo funciona bien, es solo la transición que no hace nada. Intenté usar las propiedades de transición con transition: all, transition: opacity y transition: background. Pero ninguno de ellos funciona.

Es el display propiedad que lo está haciendo. Porque cuando saco eso, funciona. ¿De qué otra manera puedo evitar esto? Porque obviamente quiero mantener el display propiedad, ya que funciona en todos los navegadores, jóvenes y mayores.

Esto es lo que tengo en este momento:

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: none;
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    display: block;
    background: rgba(0,0,0,0.5);
}

No me importa si estoy usando opacidad o fondo o lo que sea para controlar el desvanecimiento, simplemente no sé qué más hacer.

preguntado el 10 de mayo de 11 a las 13:05

¿Puedes establecer la configuración de opacidad? hay configuraciones específicas del navegador "-ms-filter:" progid: DXImageTransform.Microsoft.Alpha (Opacity = 50) ";" luego "filter: alpha (opacity = 50);" y "-moz-opacidad: 0.5"; y luego "-khtml-opacity: 0.5;" finalmente css3 "opacidad: 0.5;" -

Preferiría un método que me permitiera mantener el display propiedad, pero si esa es la única manera, supongo que tendría que hacerlo. -

Pero para ser honesto, usar un png semitransparente de 2x2 sería mejor por experiencia. No utilices 1x1 IE7 freeks out. -

Eso modifica la opacidad del elemento, en su hoja de estilo solo está modificando la opacidad del color de fondo. -

yoi todavía puede usar el bloque dispaly: en ambas situaciones. @scurker .. sí lo veo ahora. -

4 Respuestas

Parece que el propiedad de visualización no es compatible con las transiciones CSS (consulte también este TAN pregunta).

Con eso en mente, tiene varias opciones. Inicialmente, puede establecer el ancho / alto en 0 en su transición previa, o desplazar el elemento fuera de la página (algo como margin-left: -9999px;), o establezca la opacidad en 0.

En su caso, probablemente usaría esto:

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: block;
    margin-left: -9999px; /* hide element off the page */
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    margin-left: 0; /* reset element position */
    background: rgba(0,0,0,0.5);
}

contestado el 23 de mayo de 17 a las 15:05

Esto es lo que terminé haciendo:

    .matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease 0s;
    -o-transition: opacity 0.2s ease 0s;
    -moz-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity 0.15s ease 0s;
    -o-transition: opacity 0.15s ease 0s;
    -moz-transition: opacity 0.15s ease 0s;
    transition: opacity 0.15s ease 0s;
}

contestado el 16 de mayo de 11 a las 22:05

podrías usar clip en lugar de la pantalla, ya que el elemento está absolutamente posicionado

Ejemplo de trabajo

p.ej

.matrix-overlay {
    ...other properties, not display ...
    clip: rect(1px 1px 1px 1px); /* IE7 */
    clip: rect(1px,1px,1px,1px);

}

a:hover .matrix-overlay {
    ..other properties, not display ...
     clip: rect(auto); /* IE7 */
     clip: auto;
}

Puse el peculiar código de clip de código IE7 para obtener información, aunque IE no hace transiciones de todos modos y podría alimentarlo con los códigos de visualización si quisiera, pero de esta manera los mantiene igual;)

Respondido el 20 de junio de 20 a las 12:06

Puedes probar lo siguiente:

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    opacity: 0;
    pointer-events:none;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    pointer-events:auto;
    opacity: 1;
    transition: opacity 0.15s ease 0s;
}

Usar pointer-events:none y opacity:0 juntos tendrán casi el mismo efecto que display:none, pero ahora la transición debería funcionar bien.

Respondido 10 ago 13, 01:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.