动画的初始页面加载仅 [英] Animation on initial page load only
问题描述
我现在有一个CSS动画被访问时，它在我的整个的index.html变淡。
I currently have a CSS animation that fades in my whole index.html when it is visited.
我想要做的就是只有当有人从外部网站访问这一点。如果他们回到原先从我的另一网站的网页的主页，我只会动画已改变了这些元素，使之类的字幕和页脚是静态的。
What I want to do is only have this happen when someone is visiting from an external site. If they are navigating back to the homepage from another of my site's pages, i will only animate those elements which have changed, leaving things like the marquee and the footer static.
我想知道这是否是实际可行，以及如何将它实现 - jQuery的，饼干？因为我喜欢从其他网站来时，在褪色，因为它有助于平滑元素的加载，但它从一个页面浏览到另一个页面，当一个有点笨拙。
I would like to know whether this is practically possible, and how it would be implemented - jquery, cookies? as I like the fade in when coming from another site as it helps smooth the loading of elements, however its a bit clumsy when navigating from page to page.
谢谢！
推荐答案
只需使用CSS来一次动画body标签的透明度。
Just use CSS to animate the opacity of the body tag once.
修改 Firefox会记住动画跑了，所以当你回去的缓存页面就不会再次运行，但其他浏览器（Chrome浏览器）将重新运行动画。为了避免这种情况，你需要动画关键ID或类，并有一段JavaScript代码中的BODY标签检查一个cookie。
edit Firefox will remember the animation ran, so when you go back to the cached page it won't run again, but other browsers (Chrome) will re-run the animation. To avoid this you need to key the animation to an ID or class and have a snippet of JavaScript in the BODY tag to check a 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>
这篇关于动画的初始页面加载仅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
