如何暫停CSS過渡？

Question

在過渡期間，我需要隨時暫停CSS過渡。 我知道有一個解決方案，可以計算過渡屬性的當前值並直接應用它，但是這使我在Safari和IE11中“跳轉”結果。

我的目的是將transition-duration值增加到一個很大的值，按照我的理論，這應該幾乎已經暫停了過渡，但事實並非如此：

https://jsfiddle.net/j8p0msff/

$('#pause').on('click', function() {
    $('.ball').css('transition-duration: 5000s');
});

還有其他想法嗎？ 謝謝！

Answer 1

轉場

一種解決方案是在停止時刪除transition類並保存樣式的當前狀態（示例中為margin-left ）。 並且在開始時，只需再次添加transition類。

 var boxOne = document.getElementsByClassName('box')[0]; var running = false; var toggleTransition = function() { if(!running) { boxOne.classList.add('horizTranslate'); } else { var computedStyle = window.getComputedStyle(boxOne), marginLeft = computedStyle.getPropertyValue('margin-left'); boxOne.style.marginLeft = marginLeft; boxOne.classList.remove('horizTranslate'); } running = !running; } 

 .box { margin: 30px; height: 50px; width: 50px; background-color: blue; } .box.horizTranslate { -webkit-transition: 3s; -moz-transition: 3s; -ms-transition: 3s; -o-transition: 3s; transition: 3s; margin-left: 50% !important; } 

 <div class='box'></div> <button class='toggleButton' onclick='toggleTransition()'>Toggle</button> 

動畫制作

您可以使用： animation-play-state

使用例如Javascript： document.getElementById('myId').style.animationPlayState = 'paused'

 var toggleAnimation = function(){ state = document.getElementById('myId').style.animationPlayState == 'paused' ? 'running' : 'paused'; document.getElementById('myId').style.animationPlayState = state; } 

 div#myId { width: 100px; height: 100px; background: red; position: relative; -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */ -webkit-animation-play-state: running; /* Safari 4.0 - 8.0 */ animation: mymove 5s infinite; animation-play-state: running; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes mymove { from {left: 0px;} to {left: 200px;} } @keyframes mymove { from {left: 0px;} to {left: 200px;} } 

 <div id='myId'></div> <button onclick="toggleAnimation()">Toggle Animation</button>