Question

我正在使用animate.css，每次刷新或从另一个页面返回时都会出现动画;我怎么做到这一点，一旦访问index.html，我去另一个.html或刷新页面，李不再发生？

index.html
<div id="sidebar" class="col-sm-3 col-md-3">
  <nav id="sidebar-nav">
    <ul>
      <li><a id="side-post" class="animated bounceInLeft" ui-sref="timeline">Timeline</a>
      <li><a id="side-post" class="animated bounceInLeft" ui-sref="skills">Skills</a>
      <li><a id="side-post" class="animated bounceInLeft" ui-sref="personal_interests">Interests</a>
    </ul>
  </nav>

style.css 
#side-post {
 animation-delay:0.7s;
 -moz-animation-delay:0.7s;
 -webkit-animation-delay:0.7s;
}

Answer 1

我认为没有一种正确的方法可以让动画第一次，而不是当你从另一个页面回来或刷新时。如果这样做，您可能无法在重新打开网页时看到动画。

如果您必须实施此操作，请尝试存储“时间戳”＆＃39;在本地存储中，以便您可以在一段时间后允许动画运行，例如5分钟后。

var now = Date.now();

if ('lastOpened' in localStorage) {
  if (now - localStorage.lastOpened > 5 * 60 * 1000) { // 5 mins
    Array.prototype.slice.call(document.querySelectorAll('.side-post')).forEach(function(el){
      el.classList.add('animation'); // add `animation` class to each `li` element implement the animation 
    })
  }
} else {
  localStorage.lastOpened = now;
}

此外，您应该将相同的id分配给一个元素，而是使用class。查看this post - Difference between id and class in CSS and when to use it了解更多详情。

animate.css：你是如何只在第一次使用css动画？

1 个答案: