javascript - 如何停止 CSS 转换中的转换

Question

我已经设置了一个 CSS 过渡

 transition: all 2s 

然后我应用 CSS 来更改转换，例如:

 transform: rotate(20deg); 

过渡开始。

我想在中途停止它并让它留在那里，这样我就可以在它上面应用一些其他依赖于应用程序的 JS ...暂停后的内容与问题无关测试，我使用:

 setTimeout(function() {
   ...
 }, 1000);

停止过渡的一种粗略方法是将 CSS 显示设置为“无”。将转换设置为“无”或空字符串不起作用。过渡到变换结束。将 CSS 重置为当前 CSS 的另一个技巧适用于其他属性，但不适用于转换。将过渡属性设置为无或空字符串也不会停止过渡的转换。

肯定有办法。

有什么建议吗？最好在 JQuery 中我不想使用动画。

Answer 1

为什么不使用可以轻松管理状态的动画:

$('button').eq(0).click(function() {
  $('.box').css('animation-play-state', 'paused');
});
$('button').eq(1).click(function() {
  $('.box').css('animation', 'none');
});

.box {
  margin: 50px;
  width: 100px;
  height: 100px;
  background: red;
  display:inline-block;
  vertical-align:top;
  animation: anime 10s forwards;
}

@keyframes anime {
  to {
    transform: rotate(180deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button>Stop</button>
<button>Reset</button>

更新

这里是您可以尝试的过渡方式:

$('button').eq(0).click(function() {
  $('.box').addClass('rotate');
});
$('button').eq(1).click(function() {
  var e = $('.box').css('transform'); // get the current state
  $('.box').css('transform', e); //apply inline style to override the one defined in the class
});

.box {
  margin: 50px;
  width: 100px;
  height: 100px;
  background: red;
  display:inline-block;
  vertical-align:top;
  transition: all 10s;
}

.rotate {
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button>start</button>
<button>stop</button>