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 等)向动画属性添加前缀

片段

$(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);
})

@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;
}

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