如何暂停 CSS 过渡？答案

【问题标题】：How do I pause CSS transition?如何暂停 CSS 过渡？
【发布时间】：2017-08-23 02:19:02
【问题描述】：

我需要在过渡期间随时暂停 CSS 过渡。我知道有一个解决方案可以计算转换属性的当前值并直接应用它，但是这给了我在 Safari 和 IE11 中“跳跃”的结果。

我的想法是将transition-duration 的值增加到更大的值，也就是说在我的理论中应该几乎暂停了转换，但似乎情况并非如此：

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

还有其他想法吗？谢谢！

【问题讨论】：

看看：stackoverflow.com/questions/18216060/…
Is there a way to pause CSS transition mid-way?的可能重复
@Mazz，他们的解决方案是使用 animation-play-state 这是一个动画属性。如果我错了，请纠正。
@MikeMcCaughan，我已经尝试了作者在第 2 页中提出的要求，并且效果与我在帖子中描述的一样。如果我没记错的话，最佳答案的 p.1 是关于 CSS 动画，而不是过渡。
我没有得到反对票。它不是重复的，答案没有有效的解决方案。

标签： javascript jquery html css

【解决方案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>

【讨论】：

这不是animation 属性，而不是transition 吗？这不适用于transition。
谢谢，马兹。但是我项目中的代码需要使用transition，而不是animation。这就是为什么我不能使用animation-play-state。 PS球只是一个插图，不要让你阅读我的整个回购（因为没有人会）。
@sdvnksv 我添加了一个带有过渡的例子:)
谢谢！我也试过了，但在 IE 和 Safari 中它是“跳跃的”。如果你有时间，请查看我的其他帖子：stackoverflow.com/questions/43090225/…。我真的坚持这一点，所以任何帮助将不胜感激！
这很奇怪，我这里没有 IE，但它在 safari 中运行良好。稍后我会看看它