Javascript 弹出窗口只能工作一次(Animista)
我正在建立我的第一个HTML/CSS/js网站,今天开始使用Animista处理弹出窗口。我正在制作一个简单的放大/缩小弹出模块,当你点击一个按钮时可以放大,当你点击一个关闭按钮时可以缩小 出于某些原因,这只起作用一次:我关闭弹出窗口,当我再次按下按钮时,它不会显示。只有当我重新加载页面时,它才起作用。(我现在在当地工作)我自己一直在寻找答案,但找不到任何有用的答案(我猜我搜索了错误的关键字…) 如果问题很明显,我很抱歉——我对web开发非常陌生。非常感谢你 请参阅下面的代码: css: js:Javascript 弹出窗口只能工作一次(Animista),javascript,html,css,Javascript,Html,Css,我正在建立我的第一个HTML/CSS/js网站,今天开始使用Animista处理弹出窗口。我正在制作一个简单的放大/缩小弹出模块,当你点击一个按钮时可以放大,当你点击一个关闭按钮时可以缩小 出于某些原因,这只起作用一次:我关闭弹出窗口,当我再次按下按钮时,它不会显示。只有当我重新加载页面时,它才起作用。(我现在在当地工作)我自己一直在寻找答案,但找不到任何有用的答案(我猜我搜索了错误的关键字…) 如果问题很明显,我很抱歉——我对web开发非常陌生。非常感谢你 请参阅下面的代码: css: js:
我认为这可能是因为classList.toggle,您正在添加类“scale out tr”close,当您关闭它时,它将保留在元素上,但当您再次尝试打开它时,它将具有该类“scale out tr”,我猜可能存在一些冲突,请尝试使用classList.add和classList.remove。如果你重新加载它,它会再次工作,因为它会重置所有内容。@Alco这工作正常,但是,据我所知,这意味着我只能使用一个动画——我添加和删除了“在tr中缩放”。@Alco最初,我想在按“关闭”按钮时单击弹出窗口,从0缩放到100%,从100%缩放到0%。对于classList.add和classList.remove,我只使用了一个动画(不确定,也许我可以在js中反转它?)你也可以使用这个动画“向外缩放tr”来关闭动画,但你必须在点击后在tr中移除缩放,这意味着:
closePop.addEventListener(“点击”,e=>{document.querySelector(.pop-up”).classList.add(“scale out tr”)document.querySelector(“.pop-up”).classList.remove(“scale in tr”)})
同样对于boxTwo,您需要删除“scale out tr”的类。如果存在一些冲突,您可以添加setTimeout(如100ms)来执行remove-clasCan。您在CodePen或JSFIDLE上放了一个代码片段来说明问题吗?
.scale-in-tr {
-webkit-animation: scale-in-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-3-6 10:48:23
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation scale-up-tr
* ----------------------------------------
*/
/* ----------------------------------------------
* Generated by Animista on 2020-3-6 11:13:44
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation scale-in-tr
* ----------------------------------------
*/
@-webkit-keyframes scale-in-tr {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
@keyframes scale-in-tr {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
.scale-out-tr {
-webkit-animation: scale-out-tr 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: scale-out-tr 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-3-6 11:47:17
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation scale-out-tr
* ----------------------------------------
*/
@-webkit-keyframes scale-out-tr {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
@keyframes scale-out-tr {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
body {
height: 100%;
width: 100%;
position: fixed;
background-color: black;
}
header {
display: flex;
min-height: 150px;
width: auto;
justify-content: space-between;
align-items: flex-start;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
}
.box-two {
width: 75px;
height: 75px;
cursor: pointer;
border: none;
outline: none;
background-color: black;
}
.box {
width: 75px;
height: 75px;
cursor: pointer;
background-color: black;
border: none;
outline: none;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center ;
max-height: 400px;
min-height: 150px;
}
.three {
display: flex;
align-items: center;
justify-content: center ;
margin: auto;
height: 300px;
width: 600px;
}
.na {
height: 150px;
}
footer {
display: flex;
min-height: 150px;
width: auto;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
}
.invis {
background-color: blue;
align-self: auto;
visibility: hidden;
}
.four {
align-self: auto;
}
.five {
width: 65px;
cursor: pointer;
}
.pop-up {
background-color: black;
border: 1.5px solid white;
border-radius: 20px;
z-index: 10;
width: 350px;
max-width: 80%;
transform: scale(0);
position: absolute;
right: 70px;
top: 70px;
/* opacity: 0;
visibility: hidden;*/
}
.pop-up-active {
opacity: 1;
visibility: visible;
}
.pop-up.about-containter {
display: flex;
justify-content: center;
padding: 20px 20px;
color: white;
}
.about-text {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
padding: 15px 15px;
}
.pop-up-footer {
display: flex;
justify-content: center;
}
.close-pop {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 4rem;
color: white;
font-weight: lighter;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
var boxTwo = document.querySelector('.box-two');
boxTwo.addEventListener("click", e => {
document.querySelector(".pop-up").classList.toggle("scale-in-tr")
});
var closePop=document.querySelector('.close-pop');
closePop.addEventListener("click", e=>{
document.querySelector(".pop-up").classList.toggle("scale-out-tr")
});