使用 jQuery 反转 CSS 动画

Question

这是使用 CSS 关键帧动画进度条的代码。现在的问题是，如果我们想在 CSS 动画中间的某个点反转动画怎么办？我的意思是在 CSS 动画工作的第 4 秒我想突然暂停它并反转动画并将栏动画化到一开始。这是我尝试过的...我认为这是可能的，但我遗漏了一些东西，因为反向动画根本不会影响酒吧，而且有点有线！注意：接受任何类型的解决方案（如 TweenMax）...//first of all pause the animationpauseUsingCSS();console.log("pauseUsingCSS executed!");//after 2 seconds play itsetTimeout(function(){      playUsingCSS();}, 2000)//Two seconds later reverse the animation to where it started using JQuerysetTimeout(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 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

    let progress = $('#progress-bar');

    

    var css = `

        @-webkit-keyframes roll-back {

          0% {

            width: ${progress.width()}px;

          }

          100% {

            width: 1vw;

          }

        }

    `,

    head = document.head,

    style = document.createElement('style');

    style.id = 'rollback';

    head.appendChild(style);

    

    progress.css('animation', 'roll-back 10s linear forwards');

    style.type = 'text/css';

    if (style.styleSheet){

      style.styleSheet.cssText = css;

    } else {

      style.appendChild(document.createTextNode(css));

    }

    

    playUsingCSS();

    //console.log("reverseUsingJquery initiated!");

}

function resetBarStyles(){

    $('#progress-bar').attr('style', '');

    $('#rollback').remove();

}

function pauseUsingCSS(){

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

}

function playUsingCSS(){

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

   //console.log("playUsingCSS executed!");

}

#progress-bar {

  position: absolute;

  border: 0vh solid rgba(0, 0, 0, 0.8);

  width: 0vw;

  height: 9.436435124508519vh;

  margin: 62.909567496723468vh 0vw 0vh  11.2119791666666659491vw;

  background: repeating-linear-gradient(-45deg, red, red 2.80299479166666659491vw, orangered 2.80299479166666659491vw, orangered 5.60598958333333297455vw);

  border-radius: 18vh;

  animation: roll 10s linear forwards;

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

  left: -0.70074869791666659491vw;

  top: -3.9vh;

}

#progress-bar:after {

  position: absolute;

  width: 28.0299479166666681018vw;

  height: 15.7273918741808664vh;

  border: 0.140149739583333340509vw solid rgba(13, 13, 13, 0.7);

  background: rgba(13, 13, 13, 0.7);

  border-radius: 18vh;

  content: "";  

  left: -0.70074869791666659491vw;

  top: -3.9vh;

  z-index: -1;

}

@-webkit-keyframes roll {

  0% {

    width: 1vw;

  }

  100% {

    width: 26.6284505208333318982vw;

  }

}

.paused {

   -webkit-animation-play-state: paused !important; 

}

.played {

   -webkit-animation-play-state: running !important; 

}

<script

  src="https://code.jquery.com/jquery-3.4.1.js"

  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="

  crossorigin="anonymous"></script>

  

<div id="progress-bar"></div>

  <link rel="stylesheet" type="text/css" href="style.css">

<script src="script.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

Answer 2

CSS 动画有一个animation-direction属性。记住这一点，你可以尝试这样的事情：

function reverseUsingJquery(){

    $('#progress-bar').css("animation-direction", "reverse");

}

这将在该元素上应用内联样式，导致动画方向从正向更改为反向。