如果以 sessionStorage 结束,如何在会话之前保持动画状态?
How to keep the state of an animation until a session if ended with sessionStorage?
让我解释一下我想要实现的目标。
我想在用户会话期间只显示一次动画。只有当人退出浏览器并返回网站时,动画才能开始。
如果此人在另一个选项卡中刷新或打开 url,则动画不会再次开始。
所以,动画非常简单,我有两个容器占据视口的整个高度。
第一个在2秒后淡出,让出第二个容器的位置。
目标是在用户的整个访问过程中保持最终状态。
原因是不多次显示动画,这样体验就不会变得烦人。
这里是html和css
body {
margin: 0;
padding: 0;
}
.container {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.first-container {
background-color: #21bab3;
animation: fade-out 2s ease-in forwards;
animation-delay: 1s;
}
.second-container {
background-color: tomato;
}
h1 {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 10vw;
text-transform: uppercase;
}
/*ANIAMTION*/
@keyframes fade-out {
from {
opacity: 1;
height: 100vh;
}
to {
opacity: 0;
height: 0vh;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="container first-container"><h1>first</h1></div>
<div class="container second-container"><h1>second</h1></div>
<script src="main.js"></script>
</body>
</html>
我尝试查看如何在 sessionStorage 中设置动画,但没有找到答案。
我想在没有外部库的情况下实现它。
提前致谢
****编辑*****
经过提示后,我尝试了一些会话存储,但似乎无法确切地知道该怎么做。
我正在检查会话密钥是否存在,如果它为空我正在向我想要设置动画的容器添加一个 class 并为会话密钥设置一个值。
在我检查会话密钥是否为真之后,如果为真,我删除了为容器设置动画的 class。
但现在什么也没发生
var firstContainer = document.querySelector(".first-container");
var secondContainer = document.querySelector(".second-container");
if (localStorage.getItem("animationPlayedOnce") === null) {
firstContainer.classList.add("animated");
sessionStorage.setItem("animationPlayedOnce", "true");
}
if (sessionStorage.getItem("animationPlayedOnce", "true")) {
firstContainer.classList.remove("animated");
}
body {
margin: 0;
padding: 0;
}
.container {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.first-container {
background-color: #21bab3;
}
.animated {
animation: fade-out 2s ease-in forwards;
animation-delay: 1s;
}
.second-container {
background-color: tomato;
}
h1 {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 10vw;
text-transform: uppercase;
}
/*ANIAMTION*/
@keyframes fade-out {
from {
opacity: 1;
height: 100vh;
}
to {
opacity: 0;
height: 0vh;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div id="animated" class="container first-container animated">
<h1>first</h1>
</div>
<div class="container second-container"><h1>second</h1></div>
<script src="main.js"></script>
</body>
</html>
你是对的,你需要 javascript,你几乎有一个很好的解决方案,只有一件事需要改变..
你"Played already"的场景:
if (sessionStorage.getItem("animationPlayedOnce", "true")) {
firstContainer.classList.remove("animated");
}
你正在做的是删除通常在 1 秒后进行转换的 CSS class..
您应该保留此位置(以防止再次滚动)但将初始位置扩展到动画将带给用户的位置,而不是动画。像这样的东西:
CSS :
.post_animated{
opacity: 0;
height: 0vh;
animation: none!important; // don't animate
}
然后在你的 Javascript 中,删除动画后,应用上面的动画效果 css class :
JS :
if (sessionStorage.getItem("animationPlayedOnce", "true")) {
firstContainer.classList.remove("animated");
// Add
firstContainer.classList.add("post_animated");
}
这将扩展您的方法以删除过渡并仅应用您想要的 css。
这里测试了JSFiddle。 (按运行两次查看)
注意:localStorage 用于 jsFiddle,但同样适用于 sessionStorage。
让我解释一下我想要实现的目标。
我想在用户会话期间只显示一次动画。只有当人退出浏览器并返回网站时,动画才能开始。
如果此人在另一个选项卡中刷新或打开 url,则动画不会再次开始。
所以,动画非常简单,我有两个容器占据视口的整个高度。
第一个在2秒后淡出,让出第二个容器的位置。
目标是在用户的整个访问过程中保持最终状态。
原因是不多次显示动画,这样体验就不会变得烦人。
这里是html和css
body {
margin: 0;
padding: 0;
}
.container {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.first-container {
background-color: #21bab3;
animation: fade-out 2s ease-in forwards;
animation-delay: 1s;
}
.second-container {
background-color: tomato;
}
h1 {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 10vw;
text-transform: uppercase;
}
/*ANIAMTION*/
@keyframes fade-out {
from {
opacity: 1;
height: 100vh;
}
to {
opacity: 0;
height: 0vh;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="container first-container"><h1>first</h1></div>
<div class="container second-container"><h1>second</h1></div>
<script src="main.js"></script>
</body>
</html>
我尝试查看如何在 sessionStorage 中设置动画,但没有找到答案。
我想在没有外部库的情况下实现它。
提前致谢
****编辑*****
经过提示后,我尝试了一些会话存储,但似乎无法确切地知道该怎么做。
我正在检查会话密钥是否存在,如果它为空我正在向我想要设置动画的容器添加一个 class 并为会话密钥设置一个值。
在我检查会话密钥是否为真之后,如果为真,我删除了为容器设置动画的 class。
但现在什么也没发生
var firstContainer = document.querySelector(".first-container");
var secondContainer = document.querySelector(".second-container");
if (localStorage.getItem("animationPlayedOnce") === null) {
firstContainer.classList.add("animated");
sessionStorage.setItem("animationPlayedOnce", "true");
}
if (sessionStorage.getItem("animationPlayedOnce", "true")) {
firstContainer.classList.remove("animated");
}
body {
margin: 0;
padding: 0;
}
.container {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.first-container {
background-color: #21bab3;
}
.animated {
animation: fade-out 2s ease-in forwards;
animation-delay: 1s;
}
.second-container {
background-color: tomato;
}
h1 {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 10vw;
text-transform: uppercase;
}
/*ANIAMTION*/
@keyframes fade-out {
from {
opacity: 1;
height: 100vh;
}
to {
opacity: 0;
height: 0vh;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div id="animated" class="container first-container animated">
<h1>first</h1>
</div>
<div class="container second-container"><h1>second</h1></div>
<script src="main.js"></script>
</body>
</html>
你是对的,你需要 javascript,你几乎有一个很好的解决方案,只有一件事需要改变..
你"Played already"的场景:
if (sessionStorage.getItem("animationPlayedOnce", "true")) {
firstContainer.classList.remove("animated");
}
你正在做的是删除通常在 1 秒后进行转换的 CSS class..
您应该保留此位置(以防止再次滚动)但将初始位置扩展到动画将带给用户的位置,而不是动画。像这样的东西:
CSS :
.post_animated{
opacity: 0;
height: 0vh;
animation: none!important; // don't animate
}
然后在你的 Javascript 中,删除动画后,应用上面的动画效果 css class :
JS :
if (sessionStorage.getItem("animationPlayedOnce", "true")) {
firstContainer.classList.remove("animated");
// Add
firstContainer.classList.add("post_animated");
}
这将扩展您的方法以删除过渡并仅应用您想要的 css。
这里测试了JSFiddle。 (按运行两次查看)
注意:localStorage 用于 jsFiddle,但同样适用于 sessionStorage。