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

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