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之前的JavaScript和CSS无法区分它是第一次还是第二次访问。

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

sessionStorage，内置于每个现代浏览器中都非常适合。

所以，以下是步骤：您为要动画添加了一个额外的类，禁止动画。我们将其命名为animation-disabled。因此，在页面加载时，您可以通过JavaScript检查您的sessionStorage，它是否包含密钥alreadyVisited。如果它有这个标志，什么也不做。如果它没有该密钥，请将其添加到sessionStorage并从HTML元素中删除CSS类animation-disabled。

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

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

这是一个工作小提琴：

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

Answer 2

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

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

然后测试你的会话变量，以确定它是否是＆＃34;第一个视图＆＃34;页面。

您的幻灯片很可能是基于JavaScript的，因此您可能需要将PHP变量回显给JS：

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

然后使用该变量实例化幻灯片，无论是否有动画。

仅限页面加载动画

2 个答案: