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

자바 스크립트 :에서 봐 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>