将我的 slider 向左或向右滑动的 Javascript Action

Question

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

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 代码中，我有一个按钮调用将 slider 向左或向右滑动，如下所示:

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