仅在初始页面加载动画

我目前有一个CSS动画，当它被访问时会在我的整个index.html中淡出。仅在初始页面加载动画

我想要做的只是当有人从外部网站访问时发生这种情况。如果他们从我的网站的另一个页面导航回主页，我只会对那些已经改变的元素进行动画处理，而让字幕和页脚静态化。

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

谢谢！

来源

2013-07-18 user2595553

当然，这是可能的。 –

只需使用CSS来为身体标记的不透明度设置一次动画。

编辑 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-18 18:49:53

...当页面重新加载...那么什么？ –

@Diodeus你的解决方案是什么？ – user2595553

我会在页面加载时设置一个cookie，然后发送动画（如果存在）。 –

仅在初始页面加载动画

回答

相关问题