如何在不移动html元素的情况下重置css关键帧动画答案

【问题标题】：How to reset css keyframe animation without moving the html element如何在不移动html元素的情况下重置css关键帧动画
【发布时间】：2018-10-20 19:15:06
【问题描述】：

我正在尝试使用 css 动画关键帧来管理我的网站导航（我喜欢我实现的效果，我知道这不是最有效的方法）。当用户单击其中一个导航链接时，我通过 css 关键帧动画移动页面的内容。

//jQuery

 $('#home').click(function() {




        $("#Home-Content").addClass("Home-Content");

});


// css

.Home-Content {

   animation: fall  7s;
  animation-fill-mode: forwards;
}

并且动画效果很好，但是，我无法播放动画两次，如果我从 html 元素中删除类以重置动画，则元素会从其位置移动。有没有办法可以重置动画，而 html 元素不会返回到原来的位置？

提前致谢！！！

【问题讨论】：

也许您可以仅使用动画规则创建一个类。并将最终定位放在元素类上。
@netoguimaraes 你能举个例子吗？ :) 我不太清楚你的意思。
你能发布一个 jsfiddle 来帮助我了解上下文吗？
@netoguimaraes 是的，我即将发布它
@netoguimaraes codepen.io/cold2stonefire/pen/xrrBNZ

标签： jquery html css animation

【解决方案1】：

这是使用Transition 代替Animation 样式的内部导航解决方案。

使用放置所有页面的容器，div 一个之后的 div，您可以通过滑动容器本身在 Y 轴上移动所有页面。过渡让您可以流畅地滑动它们。

https://jsfiddle.net/nesquimo/1xy00039/1/

HTML

<section class="container">
  <nav>
    <ul>
      <li><a href="#" data-page="1">Page 1</a></li>
      <li><a href="#" data-page="2">Page 2</a></li>
      <li><a href="#" data-page="3">Page 3</a></li>
    </ul>
  </nav>
  <div id="scroller" class="scroller">
    <div id="page1" class="pages"></div>
    <div id="page2" class="pages"></div>
    <div id="page3" class="pages"></div>
  </div>
</section>

CSS

body{
 padding: 0;
 margin: 0;
}
.container{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.scroller{
  z-index: 100;
  transition: transform .6s ease;
}
.pages{
  width: 100%;
  height: 100vh;
}

#page1{ background: blue;}
#page2{ background: orange;}
#page3{ background: green;}

nav{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
ul{
  list-style: none;
  display: flex;
  justify-content: center
}
li{ margin: 0 1em; }
a{ color: black; }

var pages = document.querySelectorAll('[data-page]');
var scroller = document.getElementById('scroller');
var pagesCount = pages.length;

for(var i = 0; i < pagesCount; i++){
  (function(i){
    pages[i].addEventListener('click', function(e){
      e.stopPropagation();
      e.preventDefault();

      var dist = (i * 100) / pagesCount;
      scroller.style.transform = 'translate3d(0,-'+ dist +'%, 0)';
    });
  })(i);
}

【讨论】：

很高兴为您提供帮助。也许您应该验证答案以结束问题并帮助有相同问题的其他人。

【解决方案2】：

你可以使用动画迭代计数：2（您要运行动画的次数）希望这会有所帮助！

【讨论】：