使用动画的带有箭头的 CSS 滑块

Question

我正在尝试实现仅 CSS 的滑块。
当hovering 左右箭头时，滑块必须滑动。当然。

我尝试使用animation-play-state、animation-fill-mode（以保持位置）和animation-direction，但我无法完全发挥作用。

• 以animation-play-state: paused 开头，hover 箭头将其更改为running。
• 在右箭头的hover 上，一切正常。我们可以悬停、离开、再次悬停。
• 但是，只要我hover 左箭头（将animation-direction 更改为reverse），它就坏了。

简化的 sn-p：

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