Transitions CSS3 - Comment retarder la réinitialisation de la propriété z-index?

Fondamentalement, un "highlight" de la classe est ajouté à des éléments avec la classe "bord" de façon dynamique à l'aide de javascript sur mouseenter. Le point culminant de la classe est supprimée sur mouseleave. Je veux de transition à la frontière de la couleur de ces éléments. Cependant, cette "évidence" de la classe modifie également l'ordre de la pile. Je veux un z-index de 1 à régler sur tous mis l'accent sur les bords avant le début de la transition (sur mouseenter) et je veux que le z-index de 1 à retirer après la transition complète (sur mouseleave). Actuellement la propriété z-index est remis immédiatement après le "highlight" de la classe est supprimée.

De base:

.edge {

    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;

    transition-property: border-color;
    -moz-transition-property: border-color;
    -o-transition-property: border-color;
    -webkit-transition-property: border-color;
}

.edge.highlight {
    border-color: hsl(0, 0%, 85%);
    z-index: 1;
}

Première tentative (à l'évidence le retard fixe le calendrier sur une extrémité, et les dégâts sur l'autre):

.edge {
    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s, 0;
    -moz-transition-duration: 1s, 0;
    -o-transition-duration: 1s, 0;
    -webkit-transition-duration: 1s, 0;

    transition-delay: 0, 1s;
    -moz-transition-delay: 0, 1s;
    -o-transition-delay: 0, 1s;
    -webkit-transition-delay: 0, 1s;

    transition-property: border-color, z-index;
    -moz-transition-property: border-color, z-index;
    -o-transition-property: border-color, z-index;
    -webkit-transition-property: border-color, z-index;
}

Toute aide est très appréciée. Merci à l'avance.

edit: Veuillez garder à l'esprit que l'utilisateur peut mouseenter/mouseleave sur plusieurs bords avant de les transitions ont une chance de terminer. Merci.

OriginalL'auteur Shane | 2012-05-14

46

Vous pouvez utiliser un temps de retard, comme Jcubed suggéré, ou les fonctions de chronométrage step-end et step-start. L'astuce consiste à utiliser deux différents fonctions de temporisation: intensifié pour z-index, et linéaire pour opacity et d'autres propriétés continues.
```
edge {
    z-index: -1;
    opacity: 0;
    transition: z-index 0.5s step-end, opacity 0.5s linear;
}

edge.highlight {
    z-index: 1;
    opacity: 1;
    transition: z-index 0.5s step-start, opacity 0.5s linear;
}
```
Exemple: http://jsfiddle.net/cehHh/8/

Solution élégante, sans avoir besoin d'un tas de JS et de l'ajout de plus d'une classe. Nice!
Excellente solution!!!
Ils disent transition-delay travaille dans ie10+, de même que flexbox css-tricks.com/almanac/properties/t/transition-delay
génial, merci!

OriginalL'auteur z0r
3

Utilisation transition-delay. Vous pouvez faire de sorte qu'il monte sur le vol stationnaire, mais attend un certain temps avant de couler sur le vol stationnaire par l'affectation d'un délai différent de l'élément lorsqu'il est dans son état de pointage.

Exemple: http://jsfiddle.net/vQqzK/1/

Cela fonctionne dans chrome, vous ne savez pas si il va fonctionner dans d'autres navigateurs.

https://developer.mozilla.org/en/CSS/transition-delay

J'ai adapté votre exemple pour mon cas particulier. C'est proche, mais pas de cigare. Le problème est qu'il y a des bords qui se chevauchent et il est possible d'avoir beaucoup de différentes transitions en cours d'exécution à la fois. Votre technique fonctionne tant que l'utilisateur n'a pas de cascade de transitions sur le chevauchement des bords (c'est à dire attend jusqu'à ce que le mouseleave la transition sera terminée avant de commencer un autre mouseenter de transition sur un bord de chevauchement). Merci bien. Presque! J'avais vote de votre réponse parce que c'est toujours utile, mais je n'ai pas de rep pour elle.

OriginalL'auteur John Stimac

Vous pouvez utiliser deux classes, une pour chaque transition (la première pour la couleur, puis pour le z-index).
Notez que ce qui suit est faite à l'aide de jQuery pour des raisons de commodité, et c'est seulement pour un bord. De le faire pour de multiples bord, vous aurez besoin de stocker une minuterie pour chaque bord.

Donné le balisage suivant:

<div class="edge"></div>

CSS:

.edge {
    width:40px;
    height:40px;
    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;

    transition-property: border-color;
    -moz-transition-property: border-color;
    -o-transition-property: border-color;
    -webkit-transition-property: border-color;
}

.edge.highlight {
    border-color: hsl(0, 0%, 85%);
    z-index: 1;
}
.edge.endHl{
    border-color: hsl(0, 0%, 65%);
    z-index: 1;
}

(J'ai ajouté un peu de changement de couleur de la deuxième transition juste pour le montrer).

Et suivants JS:

var myTime = null;
function resetTime() {
    if (myTime !== null) {
        clearTimeout(myTime);
        myTime = null;
    }
}
$(".edge").mouseenter(function() {
    resetTime();
    $(this).addClass("highlight");
    $(this).removeClass("endHl");
});
$(".edge").mouseleave(function() {
    resetTime();
    myTime = setTimeout(function() {
        $(".edge").removeClass("endHl");
    },1000);
    $(this).removeClass("highlight");
    $(this).addClass("endHl");
});

Il va supprimer le z-index, seulement après 1 seconde, et s'applique uniquement sur la sortie.

Vous pouvez le voir en action ici: http://jsfiddle.net/TptP8/

OriginalL'auteur Py.

Vous devez vous connecter pour publier un commentaire.