javascript - 使用 jQuery 反转 CSS 动画

Question

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

我的意思是在第 4 秒，当 CSS 动画正在运行时，我想突然暂停它并反转动画并将栏动画化到最开始。

这是我试过的...

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

注意:接受任何类型的解决方案(如 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!");
}

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