如何在 CSS 转换中停止转换

Question

我设置了一个 CSS 过渡，例如

 transition: all 2s

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

 transform: rotate(20deg);

过渡开始。

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

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

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

如何在 CSS 转换中停止转换

How to stop transforms in a CSS transition

javascript

css

jquery

css-transitions

css-transforms