带箭头的 CSS slider 使用动画

Question

我正在尝试实现一个纯 CSS slider 。
当hover使用左右箭头， slider 必须滑动。当然。

我尝试使用 animation-play-state , animation-fill-mode (保持位置)和animation-direction但我无法完全使其发挥作用。

• 以 animation-play-state: paused 开头, hover ing 箭头将其更改为 running .
• 关于 hover右箭头，一切都很好。我们可以悬停、离开、再次悬停。
• 但是，一旦我hover左箭头(将 animation-direction 更改为 reverse )，它已损坏。

简化代码段:

.wrapper {
  overflow: hidden;
  position: relative;
  width: 500px;
}

.arrows {
  z-index: 2;
  position: absolute;
  top: 0;
  height: 100%;
  background: #ddd;
  opacity: 0.66;
}

.arrows:hover {
  opacity: 1;
}

.arrow-l {
  left: 0;
}

.arrow-r {
  right: 0;
}

.sliding {
  height: 160px;
  width: 2000px;
  background: linear-gradient(to bottom right, transparent 49.9%, gray 50.1%);
  animation: slide 2s linear;
  animation-play-state: paused;
  animation-fill-mode: both;
}

.arrows:hover~.sliding {
  animation-play-state: running;
}

.arrow-l:hover~.sliding {
  animation-direction: reverse;
}

@keyframes slide {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(-1500px, 0);
  }
}

<div class="wrapper">
  <div class="arrows arrow-l">[ ← ]</div>
  <div class="arrows arrow-r">[ → ]</div>
  <div class="sliding"></div>
</div>

有人可以帮助我了解正在发生的事情，并纠正这种不良行为吗？

Answer 1

这里的主要问题是改变方向将保持动画的当前状态，但它会考虑新的方向。让我们举一个简单的例子:

假设您有一个从 left:0 到 left:100% 的动画。如果您首先运行动画直到 left:80%，然后将方向更改为反转，您将得到 left:20%!

为什么？

因为在默认方向下，您达到了动画的 80%(left:80%)，而具有相反方向的相同动画的 80% 只是 left:20%.

将鼠标悬停在reverse 上，您会看到框的位置正在跳跃以切换到考虑到新方向的新状态。很明显动画何时结束，您将在第一个和最后一个状态之间切换:

.sliding {
  width:100px;
  height:100px;
  background:red;
  left:0%;
  position:relative;
  animation:slide 5s linear forwards;
  animation-play-state:paused;
}
.arrows {
  margin:20px;
}

.arrow-r:hover~.sliding {
  animation-play-state: running;
}

.arrow-l:hover~.sliding {
  animation-direction: reverse;
}

@keyframes slide {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

<div class="wrapper">
  <div class="arrows arrow-r">move normal</div>
  <div class="arrows arrow-l">reverse !!</div>
  <div class="sliding"></div>
</div>

由于这是动画的默认行为，因此没有解决办法，但您可以依靠过渡来获得类似的效果。诀窍是使用您增加/减少的持续时间来创造所需的效果。

这是一个想法:

.wrapper {
  overflow: hidden;
  position: relative;
  width: 500px;
}

.arrows {
  z-index: 2;
  position: absolute;
  top: 0;
  height: 100%;
  background: #ddd;
  opacity: 0.66;
}

.arrows:hover {
  opacity: 1;
}

.arrow-l {
  left: 0;
}

.arrow-r {
  right: 0;
}

.sliding {
  height: 160px;
  width: 2000px;
  background: linear-gradient(to bottom right, transparent 49.9%, gray 50.1%);
  transition:all 2000s linear; /*This will block the current state*/
}
.arrow-r:hover ~ .sliding {
  transform: translate(-1500px, 0);
  transition:all 2s;
}

.arrow-l:hover ~ .sliding {
  transform: translate(0px, 0);
  transition:all 2s;
}

<div class="wrapper">
  <div class="arrows arrow-l">[ ← ]</div>
  <div class="arrows arrow-r">[ → ]</div>
  <div class="sliding"></div>
</div>