CSS 动画 - 如何使用一个关键帧声明切换方向

Question

我希望 div 在单击按钮时向右移动，然后在单击同一按钮时再次向左移动。我只想使用一个keyframes声明。这可以通过交换课程吗？

我已经在 CodePen 中尝试过这个，但不幸的是，div 在第一个动画后弹回，然后第二次拒绝动画。

我没有使用 CSS 过渡，因为我希望能够使用 CSS 动画的功能，如弹跳效果。

window.addEventListener("load", function() {
  var movedOver = false;

  document.querySelector("button").addEventListener("click", function() {
    var buttonEl = document.querySelector(".one");

    if (movedOver) {
      buttonEl.classList.remove("do-the-slide");
      buttonEl.classList.add("do-the-slide-back");

    } else {
      buttonEl.classList.remove("do-the-slide-back");
      buttonEl.classList.add("do-the-slide");
    }

  });

});

.container {
  position: absolute;
  perspective: 800px;
  >div {
    position: absolute;
    padding: 20px;
    text-align: center;
    width: 100px;
  }
  >div.do-the-slide {
    animation: moveOver 1s ease-out;
  }
  >div.do-the-slide-back {
    animation: moveOver 1s reverse ease-out;
  }
  >.one {
    background: red;
  }
}

button {
  margin-top: 100px;
}

@keyframes moveOver {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(100px);
  }
}

<div class="container">
  <div class="one">One</div>
</div>

<button>Clicky</button>

代码笔：http ://codepen.io/anon/pen/Vaadao

Answer 1

好吧，在摆弄了一段时间之后，我想出了一个我认为可以接受的解决方案，使用一个关键帧声明来驱动动画的两个方向。关键是通过重绘强制浏览器重置，如下所述： https: //css-tricks.com/restart-css-animation/（感谢 Jacob Gray 发布该参考资料）。

一旦我完成了重置工作，我就使用javascript（是的，这需要javascript）在动画返回时添加相反的方向（这可以在一个单独的类中，只需添加该className）。

而且，它有效。我现在可以使用一个关键帧声明在两个方向上制作动画。非常时髦，并且大大减少了 CSS 代码。

window.addEventListener("load", function() {
  var movedOver = false;
  var direction = "";

  document.querySelector("button").addEventListener("click", function() {
    var el = document.querySelector(".one");

    el.classList.remove("do-the-slide");
    el.offsetWidth = el.offsetWidth;

    if (direction === "toRight") {
      direction = "toLeft";
      el.style.animationDirection = "reverse";

    } else {
      direction = "toRight";
      el.style.animationDirection = "";
    }

    el.classList.add("do-the-slide");

  });

});

.container {
  position: absolute;
  perspective: 800px;
  >div {
    position: absolute;
    padding: 20px;
    text-align: center;
    width: 100px;
  }
  >div.do-the-slide {
    animation: moveOver 1s ease-in-out;
    animation-fill-mode: forwards;
  }
  >.one {
    background: red;
  }
}

button {
  margin-top: 100px;
}

@keyframes moveOver {
  from {
    transform: translate3d(0px, 0, 0);
  }
  20% {
    transform: translate3d(-20px, 0, 0);
  }
  80% {
    transform: translate3d(120px, 0, 0);
  }
  to {
    transform: translate3d(100px, 0, 0);
  }
}

<div class="container">
  <div class="one">One</div>
</div>

<button>Clicky</button>

代码笔：http://codepen.io/risingtiger/pen/zqqMpv