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

Question

我正在尝试实现仅限CSS的滑块.
当hover向左和向右箭头时,滑块必须滑动.当然.

我尝试了一些东西animation-play-state,animation-fill-mode(以保持位置),animation-direction但我不能完全使它工作.

• 从箭头开始animation-play-state: paused,hover将其更改为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%！

为什么？

因为使用默认方向，您到达left:80%动画的80％（）和具有相反方向的同一动画的80％就是left:20%。

将鼠标悬停在相反方向上，您将看到盒子的位置在跳动，以考虑新的方向切换到新的状态。动画结束时很明显，您将在第一个和最后一个状态之间切换：

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