Javascript暂停和恢复文本上的过渡动画

Question

我尝试在文本上暂停/恢复过渡动画。我已经为类似的问题尝试了很多解决方案，但仍然没有成功。

我想在点击暂停按钮时暂停'颜色效果'，当我点击恢复按钮时，'颜色效果'将根据剩余持续时间完成整个文本的作业着色。

这是我的代码。

$(document).ready(function(){
  $('#start').on('click', function() {
    $(this).text('Resume');
    $(this).attr('disabled',true);

    $('span').addClass('active');
    $('span').dequeue();
  });
  $("#stop").click(function() {
    $('#start').attr('disabled',false);

    $('#start').clearQueue();
      $("span").stop();

      /*
    * it similiar like below,
    * but still not perfect.
    * when the duration of background-position-x has finished,
    * the transition start again. and yet still not perfect
      */
      /*$('span').animate({
      'background-position-x': '10%',
      'background-position-y': '20%'
    }, 10000, 'linear');*/
  });
})

body {
		background: #ccc;
	}
	span {
	    height: 25px;
	    background-size: 200% 100%;
	    background-image: linear-gradient(to right, orange 50%, white 50%), linear-gradient(to right, transparent 50%, transparent 50%);
	    text-indent: 28px;
	    font-size: 30px;
	    background-size: 200% 100%;
	    background-repeat: no-repeat;
	    background-position: 100% top, 100% top;
	    -webkit-background-clip: text, border-box;
	    background-clip: text, border-box;
	    color: transparent;
	}
	.active {
		background-position: 0% top, 0% top;
	    transition: background-position 10s; 
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span>Lorem ipsum dolor sit amet</span></p>
<button id="start">Start</button>
<button id="stop">Pause</button>

注意：我知道有很多'javascript暂停/恢复'问题，我已经尝试用我的案例来实现，但仍然没有成功。

Answer 1

使用Jquery切换css animation-play-state

确保为动画属性添加前缀以实现跨浏览器兼容性（-moz，-webkit等）

片段

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#start').on('click', function() {
    $(this).text('Resume');
    $(this).attr('disabled', true);

    $('span').addClass('active');
    $('span').dequeue();
  });
  $("#stop").click(function() {
    $('#start').attr('disabled', false);

    $('#start').clearQueue();
    $('span').removeClass('active');
    $('span').addClass('stop');
    $("span").stop();

    /*
     * it similiar like below,
     * but still not perfect.
     * when the duration of background-position-x has finished,
     * the transition start again. and yet still not perfect
     */
    /*$('span').animate({
      'background-position-x': '10%',
      'background-position-y': '20%'
    }, 10000, 'linear');*/
  });
})
$("span").on('animationend webkitAnimationEnd oAnimationEnd', function() {
  $("#start").attr('disabled', false);
})

＆＃13;

@keyframes anime {
  from {
    background-position: auto
  }
  to {
    background-position: 0% top, 0% top;
  }
}

body {
  background: #ccc;
}

span {
  height: 25px;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, orange 50%, white 50%), linear-gradient(to right, transparent 50%, transparent 50%);
  text-indent: 28px;
  font-size: 30px;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 100% top, 100% top;
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  color: transparent;
}

.active {
  animation: anime 10s;
  animation-play-state: running !important;
}

.stop {

  animation: anime 10s;
  animation-play-state: paused;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span>Lorem ipsum dolor sit amet</span></p>
<button id="start">Start</button>
<button id="stop">Pause</button>

＆＃13;

＆＃13;

＆＃13;