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%！

为什么？

因为使用默认方向，您到达了动画的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>

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

1 个答案: