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の一時停止/再開「問題がある知っているが、まだ成功していません。あなたは、クロスブラウザの互換性（-moz、-webkitなど）のためにあなたのアニメーションプロパティに接頭辞を追加することを確認したCSS animation-play-state

を切り替えるには、jQueryのを使用し

Answer 1

スニペット

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