Les Transitions CSS ne fonctionne Pas?

Ce que j'essaie de faire ici est d'obtenir une transition lors de cette div est survolé.

Tout fonctionne bien, c'est juste de la transition qui ne fait rien. J'ai essayé d'utiliser les propriétés de la transition avec transition: all, transition: opacity et transition: background. Mais aucune de ces travaux.

C'est le display propriété de le faire. Parce que quand je l'enlever, il fonctionne. Sinon, comment puis-je contourner ce problème? Parce que je veux évidemment garder la display bien, car il fonctionne sur tous les navigateurs, les jeunes et les vieux.

Voici ce que j'ai reçu à l'instant:

.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);
}

Je n'ai pas l'esprit si je suis à l'aide d'opacité ou d'arrière-plan ou que ce soit pour le contrôle de la décoloration, je ne sais pas quoi faire d'autre.

vous pouvez définir des paramètres d'opacité? il y a des paramètre de navigateur "-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; " puis "filter: alpha(opacity=50);" et " -moz-opacity:0.5;" et alors "-khtml-opacity: 0.5;" enfin css3 "opacity: 0.5;"
Je préfère une méthode me permettant de garder la display bien, mais si c'est la seule façon que j'aurais à faire, je suppose.
Mais pour être honnête, à l'aide d'une 2x2 png semi-transparentes serait mieux de l'expérience. Ne pas utiliser 1x1 IE7 freeks.
Qui modifie l'opacité de l'élément, dans sa feuille de style, il est seulement la modification de l'opacité de la couleur d'arrière-plan.
yoi pouvez toujours utiliser l'afficheur:bloc dans les deux situations. @scurker.. oui je vois que maintenant.

OriginalL'auteur Rowan | 2011-05-10

  1. 5

    Ressemble à la propriété d'affichage n'est pas pris en charge avec les transitions CSS (voir aussi cette DONC, la question).

    Avec cela à l'esprit, vous avez plusieurs options. Vous pourriez d'abord définir la largeur/hauteur de 0 dans votre pré-transition, ou de compenser l'élément de la page (quelque chose comme margin-left: -9999px;), ou réglez l'opacité à 0.

    Dans votre cas, je serais probablement utiliser ceci:

    .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);
}

    OriginalL'auteur scurker

  2. 3

    Voici ce que j'ai fait:

        .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;
}

    OriginalL'auteur Rowan

  3. 0

    vous pouvez utiliser clip au lieu d'afficher l'élément est en position absolue

    Exemple De Travail

    par exemple

    .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;
}

    J'ai mis dans le décalé IE7 clip de code code pour plus d'informations, bien que IE n'est pas de faire des transitions de toute façon et vous pourriez nourrir les codes de l'afficheur si l'on veut, mais de cette façon, les garde le même 😉

    OriginalL'auteur clairesuzy

  4. 0

    Vous pouvez essayer ce qui suit:

    .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;
}

    À l'aide de pointer-events:none et opacity:0 ensemble aura presque le même effet que display:none, mais maintenant, la transition devrait fonctionner correctement.

    OriginalL'auteur user2514117