使用 jQuery 反转 CSS 动画

Question

这是使用 CSS 关键帧动画进度条的代码。现在的问题是，如果我们想在 CSS 动画中间的某个点反转动画怎么办？

我的意思是在 CSS 动画工作的第 4 秒我想突然暂停它并反转动画并将栏动画化到一开始。

这是我尝试过的...

我认为这是可能的，但我遗漏了一些东西，因为反向动画根本不会影响酒吧，而且有点有线！

注意：接受任何类型的解决方案（如 TweenMax）...

//first of all pause the animation

pauseUsingCSS();

console.log("pauseUsingCSS executed!");

//after 2 seconds play it

setTimeout(function(){   

   playUsingCSS();

}, 2000)

//Two seconds later reverse the animation to where it started using JQuery

setTimeout(function(){       

   reverseUsingJquery()

}, 4000)

function reverseUsingJquery(){

    // Here Is Where The Problem Exist...

    pauseUsingCSS(); // pause the animation first

    $('#progress-bar').animate({width: 0, marginLeft: 0}, {duration: 1000});

    console.log("reverseUsingJquery initiated!");

    

}

function pauseUsingCSS(){

   document.getElementById("progress-bar").classList.add("paused");  

}

function playUsingCSS(){

   document.getElementById("progress-bar").classList.add("played");

   console.log("playUsingCSS executed!");

}

Answer 1

所以我在下面所做的是roll-back根据元素的当前宽度创建一个关键帧，并将其插入站点的头部。然后反过来，我添加了一个内联动画样式，roll-back它可以解决问题。这也是您可以控制反向动画的流程，因为您可以自定义时间等。我还创建了一个函数，允许您重置动态更改，以便它可以轻松地继续进行。//first of all pause the animationpauseUsingCSS();//console.log("pauseUsingCSS executed!");//after 2 seconds play itsetTimeout(function(){&nbsp; &nbsp;&nbsp; &nbsp;playUsingCSS();}, 2000)//Two seconds later reverse the animation to where it started using JQuerysetTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;reverseUsingJquery()}, 4000)function reverseUsingJquery(){&nbsp; &nbsp; // Here Is Where The Problem Exist...&nbsp; &nbsp; pauseUsingCSS(); // pause the animation first&nbsp; &nbsp; let progress = $('#progress-bar');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var css = `&nbsp; &nbsp; &nbsp; &nbsp; @-webkit-keyframes roll-back {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: ${progress.width()}px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 1vw;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; `,&nbsp; &nbsp; head = document.head,&nbsp; &nbsp; style = document.createElement('style');&nbsp; &nbsp; style.id = 'rollback';&nbsp; &nbsp; head.appendChild(style);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; progress.css('animation', 'roll-back 10s linear forwards');&nbsp; &nbsp; style.type = 'text/css';&nbsp; &nbsp; if (style.styleSheet){&nbsp; &nbsp; &nbsp; style.styleSheet.cssText = css;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; style.appendChild(document.createTextNode(css));&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; playUsingCSS();&nbsp; &nbsp; //console.log("reverseUsingJquery initiated!");}function resetBarStyles(){&nbsp; &nbsp; $('#progress-bar').attr('style', '');&nbsp; &nbsp; $('#rollback').remove();}function pauseUsingCSS(){&nbsp; &nbsp;document.getElementById("progress-bar").classList.add("paused");&nbsp;&nbsp;}function playUsingCSS(){&nbsp; &nbsp;document.getElementById("progress-bar").classList.add("played");&nbsp; &nbsp;//console.log("playUsingCSS executed!");}#progress-bar {&nbsp; position: absolute;&nbsp; border: 0vh solid rgba(0, 0, 0, 0.8);&nbsp; width: 0vw;&nbsp; height: 9.436435124508519vh;&nbsp; margin: 62.909567496723468vh 0vw 0vh&nbsp; 11.2119791666666659491vw;&nbsp; background: repeating-linear-gradient(-45deg, red, red 2.80299479166666659491vw, orangered 2.80299479166666659491vw, orangered 5.60598958333333297455vw);&nbsp; border-radius: 18vh;&nbsp; animation: roll 10s linear forwards;&nbsp; box-shadow: inset 0vw 7.8636959370904332vh 1.40149739583333318982vw rgba(255, 255, 255, 0.2), inset 0vw 0.7863695937090432vh 0vw rgba(255, 255, 255, 0.3), inset 0vw -3.9318479685452166vh 0.42044921875vw rgba(0, 0, 0, 0.2), 0vw 2.3591087811271296vh 0.280299479166666681018vw rgba(0, 0, 0, 0.3);&nbsp; left: -0.70074869791666659491vw;&nbsp; top: -3.9vh;}#progress-bar:after {&nbsp; position: absolute;&nbsp; width: 28.0299479166666681018vw;&nbsp; height: 15.7273918741808664vh;&nbsp; border: 0.140149739583333340509vw solid rgba(13, 13, 13, 0.7);&nbsp; background: rgba(13, 13, 13, 0.7);&nbsp; border-radius: 18vh;&nbsp; content: "";&nbsp;&nbsp;&nbsp; left: -0.70074869791666659491vw;&nbsp; top: -3.9vh;&nbsp; z-index: -1;}@-webkit-keyframes roll {&nbsp; 0% {&nbsp; &nbsp; width: 1vw;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; width: 26.6284505208333318982vw;&nbsp; }}.paused {&nbsp; &nbsp;-webkit-animation-play-state: paused !important;&nbsp;}.played {&nbsp; &nbsp;-webkit-animation-play-state: running !important;&nbsp;}<script&nbsp; src="https://code.jquery.com/jquery-3.4.1.js"&nbsp; integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="&nbsp; crossorigin="anonymous"></script>&nbsp;&nbsp;<div id="progress-bar"></div>&nbsp; <link rel="stylesheet" type="text/css" href="style.css"><script src="script.js"></script>&nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

Answer 2

CSS 动画有一个animation-direction属性。记住这一点，你可以尝试这样的事情：function reverseUsingJquery(){&nbsp; &nbsp; $('#progress-bar').css("animation-direction", "reverse");}这将在该元素上应用内联样式，导致动画方向从正向更改为反向。