我目前有一个CSS动画，在访问时我的整个index.html都会消失。
我想要做的只是当有人从外部网站访问时才会发生这种情况。 如果他们从我网站的另一个页面导航回主页，我只会为那些已更改的元素设置动画，让选框和页脚等内容保持静态。
我想知道这是否实际可行，以及如何实现 - jquery，cookies？ 因为我喜欢从另一个网站来的淡入，因为它有助于平滑元素的加载，但是当从一个页面导航到另一个页面时它有点笨拙。
谢谢！！
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.
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.
Thanks!!
最满意答案
只需使用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>Just use CSS to animate the opacity of the body tag once.
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>发布者：admin，转转请注明出处：http://www.yc00.com/web/1690236549a319303.html
评论列表（0条）