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

Question

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

//jQuery

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




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

});


// css

.Home-Content {

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

并且动画完美运行，但是，我无法播放动画两次，如果我从 html 元素中删除类以重置动画，元素会从其位置移动。有没有一种方法可以重置动画，而不让 html 元素返回到其原始位置？

提前致谢!!!

Answer 1

这是一个使用 Transition 而不是 Animation 样式的内部导航解决方案。

使用一个放置所有页面的容器，一个接一个的 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; }

JS

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);
}