Question

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

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

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

谢谢！

Answer 1

只需使用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>

仅在初始页面加载时动画

1 个答案: