如何在 jQuery 第二次点击时反转 CSS 动画

Question

我制作了以下菜单图标 CSS 动画，当我点击它时会触发它。当我使用 jQuery.

第二次单击它时，我想让它反向动画

#path1 {
  stroke-dasharray: 33px;
  stroke-dashoffset: 33px;
  animation: line 1.5s linear forwards;
  animation-play-state: paused;
}

@keyframes line {
  100% {
    stroke-dashoffset: -15.5;
  }
}

#halfLineLeft {
  transform-origin: 1% 50%;
  animation: shrinkleft 1s linear forwards;
  animation-play-state: paused;
}

 #halfLineRight {
  transform-origin: 100% 1%;
  animation: shrinkleft 1s linear forwards;
  animation-play-state: paused;
}

@keyframes shrinkleft {
  100% {
    transform: scale(0,1);
  }
}
svg {
  transform: translate(350px, 200px);
}

这是我目前的 jQuery...

$("svg").click(
  function(){
     $("#path1, #halfLineLeft, #halfLineRight").css("animation-play-state", "running");
  }
 );

当我第二次单击 SVG 图标时，我似乎无法弄清楚如何使它反向动画。我尝试了这段代码但没有任何运气：

$("svg").click(
  function(){
     $("#path1, #halfLineLeft, #halfLineRight").css("animation-state", "running"),
     $("#path1, #halfLineLeft, #halfLineRight").css("animation-direction", "reverse");
  }
 );

这是带现场动画的代码笔link：

http://codepen.io/anon/pen/xEORBJ

Answer 1

您可以添加 class 然后将其删除。检查这个

$("svg").on('click',function(){
    if($("#path1, #halfLineLeft, #halfLineRight").hasClass('forward')){
        $("#path1, #halfLineLeft, #halfLineRight").css("animation-direction", "reverse").removeClass('forward');
    }else{
     $("#path1, #halfLineLeft, #halfLineRight").css("animation-play-state", "running").addClass('forward');
    }  

  });

Answer 2

我不知道这是否是最有效的方法，但添加反向关键帧和切换类似乎可行。

codepen example

#path1.active {
  animation: line 1.5s forwards;
}

#path1.inactive {
  stroke-dashoffset: -15.5;
  animation: unline 1s linear forwards;
}

#halfLineLeft.active {
  animation: shrinkleft 1s linear forwards;
}

#halfLineRight.active {
  animation: shrinkleft 1s linear forwards;
}

#halfLineLeft.inactive {
  transform: scale(0, 1);
  animation: unshrinkleft 1s linear forwards;
}

#halfLineRight.inactive {
  transform: scale(0, 1);
  animation: unshrinkleft 1s linear forwards;
}

#path1 {
  stroke-dasharray: 33px;
  stroke-dashoffset: 33px;
}

@keyframes line {
  100% {
    stroke-dashoffset: -15.5;
  }
}

@keyframes unline {
  100% {
    stroke-dashoffset: 33px;
  }
}

@keyframes shrinkleft {
  100% {
    transform: scale(0, 1);
  }
}

@keyframes unshrinkleft {
  100% {
    transform: scale(1, 1);
  }
}

#halfLineLeft {
  transform-origin: 1% 50%;
}

#halfLineRight {
  transform-origin: 100% 1%;
}

svg {
  transform: translate(50px, 50px);
}

$("svg").click(
  function() {
    $("#path1, #halfLineLeft, #halfLineRight").toggleClass("active");

    if (!$("#path1, #halfLineLeft, #halfLineRight").hasClass("active")) {

      $("#path1, #halfLineLeft, #halfLineRight").addClass("inactive");

    } else {
      $("#path1, #halfLineLeft, #halfLineRight").removeClass("inactive");
    }
  }
);

如何在 jQuery 第二次点击时反转 CSS 动画

how to reverse CSS animation on second click with jQuery

css

jquery

animation

reverse

function