Question

我想暂停css转换并找到一个类似的问题并给出正确答案：Is there a way to pause CSS transition mid-way?

但我无法使用它来处理我的代码。我认为问题是前面的元素。

我做错了什么？

$(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

Answer 1

这里你的问题是你正试图在animation（自动补间动画）时暂停transition。

所以不要过渡到你想要的地方：

＆＃13;

@-webkit-keyframes example {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
@keyframes example {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.timer_1.start:before {
  width: 100%;
  -webkit-animation-name: example;
  animation-name: example;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

＆＃13;

您也不需要transition和animations的许多供应商前缀，只需要-webkit-。

在元素之前暂停css转换

1 个答案: