仅在页面上加载动画

Question

我有一个主页的动画标题，幻灯片在屏幕上。我希望它只在他们第一次加载页面时才这样做。但是，每次您返回主页时，它都会再次这样做。有没有让动画只播放一次，然后关闭，即使他们回到主屏幕？

编辑：，我在有动画的元素中添加了一个display:none。然后我添加了这个javascript，但是什么也没有发生。

// function viewWebsite {
if (sessionStorage.viewWebsite) {
  sessionStorage.viewWebsite = Number(sessionStorage.viewWebsite) + 1;
} 
else {
  sessionStorage.viewWebsite = 1;
}
if (sessionStorage.viewWebsite < 2) {
  title.style.removeProperty('display');
}

Answer 1

回到主页是一个完整的页面重新加载，因此，普通的前HTML5 5 JavaScript和CSS都无法区分它是第一次访问还是第二次访问。

所以你必须把它保存到更持久的地方。

sessionStorage，在每一个现代浏览器中内置都是非常好的。

因此，下面是步骤:在待动画中添加一个额外的类，这将禁止动画。让我们把它命名为animation-disabled。因此，在页面加载时，您可以通过JavaScript (您的sessionStorage )检查它是否包含键alreadyVisited。如果它有这个旗子，什么也不做。如果它没有该键，那么将其添加到sessionStorage中，并从您的animation-disabled元素中删除CSS类animation-disabled。

也许你会问你自己，为什么我选择默认的不动动画方法，而不是默认启动动画，并在JS加载之后关闭它:可能是，JS是在CSS之后加载的(实际上，最好的做法是这样做)，这会导致动画的闪烁：

CSS被加载，浏览器开始动画，然后JavaScript的加载和执行开始:因为它也发生在一个线程中，很有可能动画不是真正的60 CSS。此外，如果JavaScript停止，而不是启动动画，那么JavaScript很可能不得不停止已经在运行的动画，这看起来很难看。

这是一把有用的小提琴：

http://jsbin.com/manono/1/edit?html,css,js,output

Answer 2

在第一次访问时，显示动画，并在服务器端会话变量中存储一个值：

<?php $_SESSION['seenSlideshow'] = true; ?>

然后测试您的会话变量，以确定它是否是页面的“第一视图”。

您的幻灯片很可能是基于JavaScript的，因此您可能不得不将PHP变量回显到JS：

<script type="text/javascript">
var seenSlideshow = <?php echo $_SESSION['seenSlideshow'];?>;
</script>

然后使用该变量实例化带有或不使用动画的幻灯片。