遅れて可逆的に遷移する

Question

私がやっているのは、ホバリングの切り替えやアニメーション（JavaScriptでonmouseoverまたはonmouseenterでトリガーできる）です。

• 反対アニメーションがとてもこのcodepen目を確認してください、それは表示せずに説明するのは難しい

遅滞なく、アニメーションの途中で逆転することができるはず遅延

を持つべきですで、私が達成しようとしているものにかなり近いです：http://codepen.io/anon/pen/xROOqO

ここでは二つの問題があります。

• は、私がtransitionendハンドラ内での経過時間をチェックする必要があるので、私は両方のCSSを更新し、する必要がありますjsは遷移時間を更新する
• それはまだあなたがすぐに逆のアニメーションに内外でホバー遅延を持っている - それは、中央

で立ち往生ているように見えるかもしれないキーフレーム（CSSトランジションを使用して、このことも可能ですnimation）または私はjavascriptでタイマーを設定し、CSSからの遅延を残すに固執する必要がありますか？

Answer 1

私が提示しようとしていることがより簡単なのかどうかはわかりませんが、あなたの問題のいくつかに対処しているように見えます。

主な考えは、問題が複数の状態のために複雑であることを認め、ステートマシンを使用してそれを扱うことです。 これは、このような宣言的なアプローチが可能になります：

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', 
    }, 
} 

やイベントの非常にシンプルな取り扱い：

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

別の洞察力はあなたがCSS transition-delay:3sプロパティを使用して遅延を指定することができるということです。

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

概念証明はここにあります：http://codepen.io/anon/pen/pNNMWM。

私の解決方法が気に入らないのは、初期状態がsmall-outsideであると仮定しているのに対し、ページが読み込まれると実際にはマウスポインタがdiv内に配置されている可能性が高いということです。 JSから状態遷移を手動でトリガーする機能について説明しました。私はあなたが2つの別個のブール変数を追跡している限り、これは可能であると信じています。 「jsが成長するように頼んでいますか？」それらを1つの状態に混在させることはできず、正確な「カウント」が必要です。あなたが見る通り、すでに2*2=4州があります。私は{small,big}x{inside,outside}を追跡しようとしています。これは、同様の方法で{small,big}x{inside,outside}x{js-open,js-close}に拡張し、「開く」「閉じる」のような余分な「イベント」があります。