Css3遷移キュー

Question

同じプロパティでCSS遷移をキューに入れようとしています。基本的には、別の翻訳を行う前に要素を特定の位置に変換したいので（遷移時間0）

これにより、第2の遷移が最初に上書きされるため、このdoesntの仕事（ボックスは100pxに左を変換する前に、100pxに右に移動する必要があります）移動して

1. をクリックし、モックアップのですか？

https://jsfiddle.net/aqwaypoh/3/

これは、（私はそれ以外の場合はdoesntの火をtransitionend遷移期間非ゼロ（0.01）が必要）動作。

https://jsfiddle.net/dpv3xzth/5/

別の問題の移行エンド火災はクロームの2倍あり

が、私はそれを修正することができ、私は思っていたこれを書くための良い方法はありますか？

可能であれば、エンドイベントやタイマーなしでこれを書いてもいいですか？

<div class="box"></div> 
<a href="#" class="move">move</a></a> 

Answer 1

更新：

あなたは@keyframesとCSS3 animationプロパティを使用することができます。

.box.animate { 
    animation: move 2s; 
} 

@keyframes move { 
    0% { 
    transform: translate(100px); 
    } 
    100% { 
    transform: translate(0px); 
    } 
} 

そして、あなたはあなたの要素にクラスanimateを追加することができますボックスの移動を作成します。または、animationプロパティを自分でjavascriptに設定することもできます。それはあなた次第です。

box.addClass('animate') 

jsfiddle：https://jsfiddle.net/aqwaypoh/7/

Answer 2

第二の条件にタイムアウトを追加するには、あなたは私は信じたいものをあなたに与えます。

var box = $('.box'), 
    move = $('.move').click(function() { 
    box.css({ 
     "transform": "translate(100px)", 
     'transition-duration': '0s' 
    }); 

    setTimeout(function(){ 
     box.css({ 
     "transform": "translate(0px)", 
     'transition-duration': '0.5s' 
     }); 
    }, 1); 
    })