您第一次访问我的网站时,我有一个说
的动画"你好。我是鲍勃",那个动画慢慢消失。然后通过导航栏,用户可以进入网站的另一个页面。
问题在于,如果他们返回到主页(主页面),则动画再次显示 。这次我只想要"你好。我是Bob"。没有动画。
$(".fade-in-first").addClass("animated fadeInUp");
setTimeout(function(){
$(".fade-in-second").animate({ opacity: 1 });
$(".btn-explore").addClass("pulse-anim");
}, 1300);
我上面的jQuery是动画。我想要像...... if (count) == 0, then animate, count ++
我尝试设置一个变量并执行它,但它没有用。
答案 0 :(得分:2)
您可以使用localStorage
存储用户看过动画的事实。
我不确定您使用的setTimeout ......但我离开了它。
$(".fade-in-first").addClass("animated fadeInUp");
setTimeout(function(){
if(typeof(localStorage.getItem("welcomeShown")) != null && localStorage.getItem("welcomeShown") != "true"){
$(".fade-in-second").animate({ opacity: 1 },5000);
localStorage.setItem("welcomeShown","true");
}else{
$(".fade-in-second").css("opacity",1);
}
$(".btn-explore").addClass("pulse-anim");
}, 1300);
您可以在CodePen中尝试,其中还有一个按钮来清除localStorage(重试多次!)
答案 1 :(得分:2)
假设他们的浏览器在返回您的主页时重新加载您的网站(即您没有创建单页应用),那么您的脚本也将重新初始化。因此,count
不会保留其拥有的价值,而这需要跟踪用户之前的访问权。
在这种情况下,您需要存储Cookie,或使用sessionStorage
或localStorage
。
// sessionStorage or localStorage (localStorage usage is exactly the same)
if (!sessionStorage.getItem('hasVisited')) {
$(".fade-in-first").addClass("animated fadeInUp");
setTimeout(function(){
$(".fade-in-second").animate({ opacity: 1 });
$(".btn-explore").addClass("pulse-anim");
}, 1300);
sessionStorage.setItem('hasVisited', true);
}
如果您只想跟踪当前会话的主页访问,请使用sessionStorage
,只要当前标签,窗口或浏览器未关闭,该会话就会持续。在实践中,似乎sessionStorage可以持续关闭/重新打开选项卡,可能以特定于供应商的方式,因为它们处理选项卡历史记录。此外,sessionStorage中的项目不会在标签之间共享,因此,如果您的用户在多个标签页中打开该页面,并从不同的标签返回主页,那么他们会再次看到您的动画。< / p>
如果您希望值在不同会话和标签之间保持不变,请使用localStorage
。用于浏览站点的所有选项卡都可以访问同一个同步的localStorage对象。
注1:我们建议您使用Web Storage API
阅读和设置session/localStorage
(setItem() / getItem()
)的值,而不是阅读和写作直接对象,避免处理从原型继承的读取值的问题,并避免覆盖现有属性。
例如,如果您执行以下操作:
localStorage.key = 'My key value';
console.log(localStorage.key);
您会注意到您设置的值确实可用且可读,但遗憾的是您现在已经覆盖了localStorage对象的key
方法!
注2:这些值只能通过相同的协议在同一个子域上访问!因此,如果您从www.example.com
转到login.example.com
,或从http://www.example.com
转到https://www.example.com
,则不会保留这些值。
如前所述,你也可以使用cookies,但解析这些值需要做更多的工作(尽管你已经使用过jQuery,所以它不会太糟糕)。您还必须注意您为Cookie设置的path
,否则它只适用于您设置它的路径。还需要考虑expires
的价值。有关详细信息,请参阅以下链接:
https://www.w3schools.com/js/js_cookies.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
答案 2 :(得分:0)
稍微更模块化的解决方案,因为您可能想要检查他们是否曾在多个案例中访问过。
if (!localStorage.isFirstVisit) {
localStorage.isFirstVisit = true;
} else if (localStorage.isFirstVisit == 'true') {
localStorage.isFirstVisit = false;
}
if((localStorage.isFirstVisit == 'true') {
$(".fade-in-first").addClass("animated fadeInUp");
setTimeout(function(){
$(".fade-in-second").animate({ opacity: 1 });
$(".btn-explore").addClass("pulse-anim");
}, 1300);
}
答案 3 :(得分:0)
您可以使用LocalStorage设置一个属性,以加载特定页面上的动画,因此您无需重播它。我不喜欢这种方法,因为在用户没有清除其本地存储之前,他再也看不到动画了…… 我认为一种更好的方法是设置一个有效期较短的cookie(例如1天)。
例如,使用localStorage:
// 1 - using LocalStorage: play anim only one time until the localstorage is cleared:
if (!window.localStorage.getItem('homeAnimPlayed')) {
setTimeout(() => {
window.localStorage.setItem('homeAnimPlayed', "true");
this.setState({ animationLoaded: true })
}, 3000);
} else {
this.setState({ animationLoaded: true })
}
使用Cookie:
// 2 - using a cookie: you can set a custom expiration, for example 1 day.
// use this 2 function to read/write cookies with a custom expire date
function writeCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// then you can set the cookie: play anim only one time: expires in 1 days
let cookie = readCookie("animPlayed_home");
if (!cookie) {
setTimeout(() => {
writeCookie("animPlayed_home", "true", 1);
this.setState({ animationLoaded: true })
}, 3000);
} else {
this.setState({ animationLoaded: true })
}