1

我目前有一个 CSS 动画，当它被访问时，它会在我的整个 index.html 中消失。

我想做的只是当有人从外部站点访问时才会发生这种情况。如果他们从我网站的另一个页面导航回主页，我只会为那些已更改的元素设置动画，而使选框和页脚等内容保持不变。

我想知道这实际上是否可行，以及如何实现 - jquery、cookies？因为我喜欢来自另一个站点时的淡入，因为它有助于平滑元素的加载，但是在从一个页面导航到另一个页面时它有点笨拙。

谢谢！！

4

1 回答 1

0

只需使用 CSS 为 body 标签的不透明度设置一次动画。

编辑Firefox 会记住动画已运行，因此当您返回缓存页面时它不会再次运行，但其他浏览器 (Chrome) 会重新运行动画。为避免这种情况，您需要将动画键入 ID 或类，并在 BODY 标记中包含一段 JavaScript 来检查 cookie。

#first {
animation: fadeInOnce 1s 1 ease; 
-webkit-animation: fadeInOnce 1s 1 ease;
-moz-animation: fadeInOnce 1s 1 ease;
-o-animation: fadeInOnce 1s 1 ease;
-ms-animation: fadeInOnce 1s 1 ease;
}
@keyframes fadeInOnce { 0% {display: none; opacity: 0;} 100% {display:block; opacity: 1;} }
@-webkit-keyframes fadeInOnce { 0% {display: none; opacity: 0;} 100% {display:block; opacity: 1;} }
@-moz-keyframes fadeInOnce { 0% {display: none; opacity: 0;} 100% {display:block; opacity: 1;} }
@-o-keyframes fadeInOnce { 0% {display: none; opacity: 0;} 100% {display:block; opacity: 1;} }
@-ms-keyframes fadeInOnce { 0% {display: none; opacity: 0;} 100% {display:block; opacity: 1;} }

<body>
if(false == /(^|;)\s?first=1\s?($|;)/i.test(document.cookie)) {
    document.body.id="first";
    document.cookie = "first=1; expire= path=/";
}
....
</body>
于 2013-07-18T18:49:53.483 回答