Question

对于我的某个网站上的转换，我使用的是Animated.css。它工作正常，除非我在导航栏上应用转换，每次我更改页面（单击导航栏上的项目）时，转换再次运行。

我想仅在网站加载/重新加载时才运行转换。不是我改变页面的时候。

有没有办法用普通的CSS实现这一目标？或者我需要实现一些JavaScript代码吗？

代码片段：

<div class="col-xs-6 col-xs-offset-3 col-sm-2 col-sm-offset-1">
    <header id="masthead" class="site-header" role="banner">
        <div class="top-header animated fadeInDown">
            <nav class="navbar navbar-primary" role="navigation" id="navigation">
            //...
            </nav>
        </div>
    </header>
</div>

Answer 1

您可以在javascript中使用仅限会话的Cookie。

在页面底部包含以下脚本：

<script>
if (document.cookie.indexOf('siteloaded=loaded') < 0) {

    [... Activate Animation ...]

    document.cookie = "siteloaded=loaded";
}
</script>

当网站首次加载时，它会检查是否存在仅限会话的cookie。

如果cookie不存在，它将激活动画并设置cookie。

如果cookie存在，它将不会激活动画。

当访问者关闭网站标签时，会删除仅限会话的Cookie。

补充阅读：

感谢Mohit Bhardwaj的提示，下面。

如果您想尝试一种HTML5仅限客户端的存储解决方案，它比使用会话cookie更新，更强大（更快的性能，更少的服务器往返次数，更大的容量等），也可以查看window.sessionStorage属性：

https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

仅在网站加载时Animate.css转换

1 个答案: