如何在 CSS 过渡中停止变换

Question

我已经设置了类似的 CSS 过渡

 transition: all 2s 

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

 transform: rotate(20deg); 

过渡开始。

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

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

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

肯定有办法。

有什么建议吗？最好在 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>