Question

我正在使用JS / CSS构建自定义滑块。到目前为止，我有以下内容：

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { 
  min-width: 215px;
  width: 20vw; 
  height: auto;
  float: left; 
  margin-right: 5px;
}
div#slider figure { 
  position: relative;
  width: 140vw;
  min-width: 1535px !important;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  /* animation: 30s slidy infinite; */
}

@keyframes slidyleft {
  0% { left: 0%; }
  100% { left: -20vw; }
}
@keyframes slidyright {
  0% { left: 0%; }
  100% { left: 20vw; }
}

我按如下方式使用它：

<div id="slider">
  <figure id="sliderfigure">

    <img src="image1.png">
    <img src="image1.png">
    <img src="image1.png">
    <img src="image1.png">
    <img src="image1.png">

   </figure>
</div>

在我的Angular代码中，我有一个按钮，可以调用滑块向左或向右滑动，如下所示：

var elem  = document.getElementById("sliderfigure");
elem.style.animation = '1s slidyleft'; 

var elem  = document.getElementById("sliderfigure");
elem.style.animation = '1s slidyright';

但是，会发生的事情是它确实会向右或向左滑动，但它最终会再次返回到原始位置。

如何将其保留在未来的位置？

提前致谢。

Answer 1

由于您未指定animation-fill-mode，因此默认值为none。但要保持动画的100％状态，您需要forwards。

所以你可以像这样编写动画：

var elem  = document.getElementById("sliderfigure");
elem.style.animation = '1s slidyright forwards';

有关更多信息，请参阅此信息： https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

用于向左或向右滑动滑块的Javascript操作

1 个答案: