遅延なしで純粋なJSでCSSを遷移

Question

私が達成したいのは、トランジションがそれらの間で実行されるように、前の状態から最初の状態へと変わらないように、いくつかのプロパティ（上記のコードでbackground-color）上記のコードはほとんどタイムアウトが0に設定されているのでほとんど動作しません。少なくとも10に設定されていればほぼ常に動作し、100に設定すると常にマシン上で動作します。コードを線形に実行するか、適切なイベントコールバックに基づいて実行してください（これまでのところ有用ではありませんでした）。ここで

は、例えば、（also on jsFiddle）です：

var outter = document.getElementById('outter'); 
 
var test = document.getElementById('test'); 
 

 
test.onclick = function() { 
 
    outter.removeChild(test); 
 
    test.style.backgroundColor = 'green' 
 
    outter.appendChild(test); 
 
    setTimeout(function() { 
 
    test.style.backgroundColor = 'red' 
 
    }, 0); 
 
}

#test { 
 
    position: fixed; 
 
    left: 2em; 
 
    right: 2em; 
 
    top: 2em; 
 
    bottom: 2em; 
 
    background-color:red; 
 

 
    transition-duration: 2s 
 
}

<div id=outter> 
 
    <div id=test></div> 
 
</div>

Answer 1

緑行くと悲しいことに、まだベンダーを必要とし、transitionendハンドラを（使用しているとき、私は非常に短い移行を使用してそれを行うために管理しました接頭辞  — yeesh）。

次は、Firefox、Chrome、IE11で動作します。 （私はあなたがクラスを使用する必要がないことに注意してください、私はCSSでスタイルを維持することを好む、あなたがoutter.style.transitionDuration = "2s";などを使用することができます。）

var outter = document.getElementById('outter'); 
 
var test = document.getElementById('test'); 
 

 
function onTransition(element, handler, add) { 
 
    var method = (add ? "add" : "remove") + "EventListener"; 
 
    element[method]("transitionend", handler, false); 
 
    element[method]("mozTransitionEnd", handler, false); 
 
    element[method]("webkitTransitionEnd", handler, false); 
 
} 
 

 
test.onclick = function() { 
 
    // If we're running... 
 
    if (outter.classList.contains("green")) { 
 
    // ...reset 
 
    onTransition(outter, greenToRed, false); 
 
    onTransition(outter, redDone, false); 
 
    outter.classList.remove("green", "red"); 
 
    } 
 
    onTransition(outter, greenToRed, true); 
 
    outter.classList.add("green"); 
 
}; 
 

 
function greenToRed() { 
 
    onTransition(outter, greenToRed, false); 
 
    onTransition(outter, redDone, true); 
 
    outter.classList.add("red"); 
 
} 
 
function redDone() { 
 
    onTransition(outter, redDone, false); 
 
    outter.classList.remove("green", "red"); 
 
}

#test { 
 
    position: fixed; 
 
    left: 2em; 
 
    right: 2em; 
 
    top: 2em; 
 
    bottom: 2em; 
 
    background-color: red; 
 
} 
 

 
.green #test { 
 
    background-color: green; 
 
    transition-duration: 0.0001s; 
 
} 
 
.red #test { 
 
    transition-duration: 2s; 
 
    background-color: red; 
 
}

<div id=outter> 
 
    <div id=test></div> 
 
</div>

上記

はただの証拠でありますもちろん、コンセプトです。それは洗練され、公正なビットをきれいにすることができます。タイムアウトなし

Answer 2

：

var outter = document.getElementById('outter'); 
 
var test = document.getElementById('test'); 
 

 
test.onmousedown= function() { 
 
    test.style.transitionDuration = "0s"; 
 
    test.style.backgroundColor = 'green'; 
 
}; 
 

 
test.onmouseup= function() { 
 
    test.style.transitionDuration = "2s"; 
 
    test.style.backgroundColor = 'red'; 
 
};

#test { 
 
    position: fixed; 
 
    left: 2em; 
 
    right: 2em; 
 
    top: 2em; 
 
    bottom: 2em; 
 
    background-color:red; 
 
}

<div id=outter> 
 
    <div id=test></div> 
 
</div>