2
之前,我想暂停CSS过渡,发现有一个正确的答案类似的问题:Is there a way to pause CSS transition mid-way?暂停CSS过渡元素上
,但我无法得到它在我的代码工作。我认为问题在于之前的因素。
我在做什么错了?
$(function() {
$('.start_timer_1').click(function() {
$('.timer_1').addClass('start');
});
$('.pause_timer_1').click(function() {
$('.timer_1').toggleClass('pause');
});
});
.timer_1 {
position: relative;
width: 500px;
height: 40px;
background: #efdfe1;
}
.timer_1:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: #dc281e;
}
.timer_1.start.pause:before {
background: blue;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.timer_1.start:before {
width: 100%;
-webkit-transition: width 10000ms linear;
-moz-transition: width 10000ms linear;
-o-transition: width 10000ms linear;
-ms-transition: width 10000ms linear;
transition: width 10000ms linear;
}
<div class="timer_1"></div>
<button class="start_timer_1">Start</button>
<button class="pause_timer_1">Pause</button>
在这里,您可以测试代码:http://codepen.io/atticweb/pen/bdjPGj
非常好的答案!所以过渡与动画不一样,明白了!我希望只需简单的转换即可完成,代码少。谢谢! – Atticweb
是的,一个转换只能从A转到B(并且实际上并没有改变属性的值,所以没有什么可以停下来的。)动画可以有多个阶段(被称为关键帧)(这会改变属性你的规则),这就是你暂停它的能力。 – DCdaz