Reversible Übergang mit Verzögerung

Question

Was ich versuche zu tun, ist auf Hover Übergang oder Animation (kann über Javascript mit onmouseover oder onmouseenter ausgelöst werden), die auch reversibel sein wird (so dass die umgekehrte Animation sollte auf Maus verlassen) aber

• sollte die entgegengesetzte Animation eine Verzögerung
• haben sollte bitte überprüfen sie diese codepen th ohne zu zeigen, so zu beschreiben

es ist schwer, ohne Verzögerung in der Mitte der Animation umkehren können, an ist ziemlich nah an, was ich versuche zu erreichen: http://codepen.io/anon/pen/xROOqO hier

Es gibt zwei Probleme:

• ich für verstrichene Zeit in transitionend Handler überprüfen müssen, so würde ich beide CSS zu aktualisieren und js Übergangszeit
• aktualisieren es hat immer noch Verzögerung, wenn Sie schnell in und aus auf der Rückseite Animation schweben - sieht aus wie es in der Mitte

Ist dies überhaupt möglich mit CSS-Übergängen (vielleicht einer stecken Keyframes nimation) oder sollte ich bei der Einstellung Timer in Javascript bleiben und die Verzögerung von CSS weglassen?

Answer 1

Ich bin mir nicht sicher, ob das, was ich vorstelle, einfacher ist, aber es scheint einige Ihrer Probleme anzugehen und entspricht meinem Geschmack.

Die Hauptidee besteht darin, zuzugeben, dass das Problem aufgrund mehrerer Zustände kompliziert ist, und es mit einer Zustandsmaschine zu behandeln. Dies ermöglicht einen deklarativen Ansatz wie diese:

const TRANSITIONS = { 
    'small-inside' : { 
    'transitionend' : 'big-inside', 
    'mouseover' : 'small-inside', 
    'mouseout' : 'small-outside', 
    }, 
    'small-outside' : { 
    'transitionend' : 'small-outside', 
    'mouseover' : 'small-inside', 
    'mouseout' : 'small-outside', 
    }, 
    'big-inside' : { 
    'transitionend' : 'big-inside', 
    'mouseover' : 'big-inside', 
    'mouseout' : 'big-outside', 
    }, 
    'big-outside' : { 
    'transitionend' : 'small-outside', 
    'mouseover' : 'big-inside', 
    'mouseout' : 'big-outside', 
    }, 
} 

Und ganz einfache Handhabung der Ereignisse:

function step(e){ 
    box.className = TRANSITIONS[box.className][e.type]; 
} 
box.addEventListener('transitionend', step); 
box.addEventListener('mouseover', step); 
box.addEventListener('mouseout', step); 

Eine weitere Erkenntnis ist, dass Sie die Verzögerung mit CSS transition-delay:3s Eigenschaft angeben:

div.small-inside, 
div.big-inside { 
    width: 300px; 
} 
div.small-outside, 
div.big-outside { 
    width: 150px; 
} 
div.big-outside { 
    transition-delay:3s; 
} 

Der Proof of Concept ist hier: http://codepen.io/anon/pen/pNNMWM.

Was ich an meiner Lösung nicht mag, ist, dass es davon ausgeht, dass der Anfangszustand small-outside ist, während der Mauszeiger in der div gut positioniert sein könnte, wenn die Seite geladen wird. Sie haben die Fähigkeit erwähnt, Zustandsübergänge manuell von JS aus auszulösen. Ich glaube, das ist möglich, solange Sie zwei separate boolesche Variablen verfolgen: "Ist die Maus drin?" und "fragt js nach wachsen?". Sie können sie nicht in einen einzigen Zustand mischen und erwarten ein korrektes "Zählen". Wie Sie sehen, habe ich bereits 2*2=4 Staaten, weil ich versuche, den Überblick über {small,big}x{inside,outside} zu behalten - man könnte vorstellen, es auf {small,big}x{inside,outside}x{js-open,js-close} in ähnlicher Weise zu erweitern, mit einigen zusätzlichen "Ereignissen" wie "Öffnen" und "Schließen".