如何只在第一次显示动画 html css.

Question

你第一次访问我的网站时，我有一个动画说

"你好。我是鲍勃"，动画慢慢淡入。然后通过导航栏，用户可以转到网站的另一个页面。

问题是，如果他们回到主页(主页(，那么动画会再次显示。这次我只想要"你好。我是鲍勃"。没有动画。

$(".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 ++

我尝试设置一个变量并执行此操作，但它不起作用。

Answer 1

您可以使用localStorage来存储用户已观看动画的事实。

我不确定您使用的设置超时...但我离开了它。

$(".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 的按钮(重试多次！

Answer 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 中的项目不会在选项卡之间共享，因此，如果用户在多个选项卡中打开页面，并从与他们开始使用的选项卡不同的选项卡返回到主页，他们将再次看到您的动画。

如果希望值在不同会话和选项卡之间保留，请使用localStorage。用于浏览站点的所有选项卡都将有权访问相同的同步 localStorage 对象。

注意 1：建议使用上述setItem() / getItem()从Web Storage API(session/localStorage(读取和设置值，而不是直接读取和写入对象，以避免处理读取从原型继承的值的问题，并避免覆盖现有属性。

例如，如果执行以下操作：

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，则不会保留这些值。

饼干

如前所述，您也可以使用 cookie，但解析值需要做更多的工作(尽管您已经在使用 jQuery，所以它不会太糟糕(。您还必须注意为 cookie 设置的path，否则它仅适用于您设置它的路径。还有expires的价值需要考虑。有关详细信息，请参阅以下链接：

https://www.w3schools.com/js/js_cookies.asp

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Answer 3

一个稍微模块化的解决方案，因为您可能想检查他们是否在多个情况下访问过。

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);
}

Answer 4

您可以使用 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 })
}

使用饼干：

// 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 })
}