如何在 CSS 过渡中停止转换

Question

我设置了一个 CSS 过渡，如下所示

 transition: all 2s 

然后我应用 CSS 来更改转换，如下所示：

 transform: rotate(20deg); 

过渡开始。

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

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

停止转换的一种粗略方法是将 CSS 显示设置为"none"。将转换设置为"无"或空字符串不起作用。转换将过渡到最后进行转换。将 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>