使用动画的带有箭头的CSS滑块 [英] CSS slider with arrows using animation

问题描述

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

I am trying to achieve a CSS only slider.
When hovering left and right arrows, the slider has to slide. Of course.

我尝试使用animation-play-state，animation-fill-mode(以保持位置)和animation-direction进行操作，但是我无法完全使其正常工作.

I tried something using animation-play-state, animation-fill-mode (to keep the positions) and animation-direction but I'm not able to fully make it work.

• 从animation-play-state: paused开始，hover箭头将其更改为running.
• 在右箭头的hover上，一切都很好.我们可以悬停，离开，再次悬停.
• 但是，一旦我hover左箭头(将animation-direction更改为reverse)，它就坏了.

• Starting with animation-play-state: paused, hovering the arrows changes it to running.
• On hover of the right arrow, everything is fine. We can hover, leave, hover again.
• But, as soon as I hover the left arrow (that changes the animation-direction to reverse), it's broken.

简化的代码段:

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

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

Can someone help me understand what is happening, and correct this unwanted behaviour?

推荐答案

此处的主要问题是，更改方向将保留动画的当前状态，但它将考虑新的方向.让我们举一个简单的例子:

The main issue here is that changing the direction will keep the current state of the animation BUT it will consider the new direction. Let's take an easy example:

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

Suppose you have an animation from left:0 to left:100%. If you first run the animation untill left:80% and then you change the direction to reverse you will have left:20%!

为什么?

因为使用默认方向，您达到了动画的80％(left:80%)，而具有相反方向的同一动画的80％就是left:20%.

Because with the default direction you reached the 80% (left:80%) of the animation and 80% of the same animation with reverse direction is simply left:20%.

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

Hover on reverse and you will see that the position of the box is jumping to switch to the new state considering the new direction. It's obvious when the animation ends and you will be switching between the first and last state:

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

对此没有解决方法，因为它是动画的默认行为，但是您可以依靠过渡来获得类似的效果.诀窍是随着增加/减少持续时间来创建所需的效果.

There is no fix for this since it's the default behavior of animation, but instead you can rely on transition to obtain a similar effect. The trick is to play with the duration that you increase/decrease to create the needed effect.

这是一个主意:

.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滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！