英文:
Element animates and keeps returning after completion
问题
以下是翻译好的部分：
我有一个元素，它是一个登录按钮，它淡入，然后我应用一些JavaScript来在点击时将动画更改为淡出。但是一旦淡出完成，元素再次出现，即使我已经向元素添加了一个hidden类，所以它应该保持隐藏。
这是我设置的方式：
<div id="login">登录到网站</div>
.hidden {
display: none;
}
#login {
/* ... 省略其他样式 ... */
animation: anim-show .5s ease;
}
const login = document.getElementById('login');
login.addEventListener('animationend', onComplete);
function onComplete(event) {
if (event.animationName == "anim-show") {
login.addEventListener('click', onClick);
} else if (event == "anim-hide") {
login.classList.add("hidden");
}
}
function onClick() {
login.style.animationName = "anim-hide";
login.removeEventListener('click', onClick);
}
一旦anim-hide动画完成，就会应用hidden类，所以它应该保持隐藏。但是元素仍然出现在页面上。
我本以为它至少会保持不透明度为0，但显然这并没有发生，我不知道为什么。
英文:
I have an element which is a login button, it fades in, then i apply some JavaScript to change the animation to a fade out when it is clicked. But once the fade out is complete the element appears again even though i added a hidden class to the element so it should remain hidden.
This is how i have it setup:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const login = document.getElementById('login');
login.addEventListener('animationend', onComplete);
function onComplete(event) {
if (event.animationName == "anim-show") {
login.addEventListener('click', onClick);
} else if (event == "anim-hide") {
login.classList.add("hidden");
}
}
function onClick() {
login.style.animationName = "anim-hide";
login.removeEventListener('click', onClick);
}
<!-- language: lang-css -->
.hidden {
display: none;
}
#login {
min-width: 150px;
min-height: 10px;
width: fit-content;
height: fit-content;
padding: 2px;
background-color: #466995;
border-radius: 1px;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
font-size: 15px;
text-align: center;
padding: 10px;
animation: anim-show .5s ease;
user-select: none;
}
@keyframes anim-show {
from {
margin-bottom: 25%;
opacity: 0;
}
to {
margin-bottom: 0%;
opacity: 1;
}
}
@keyframes anim-hide {
from {
margin-top: 0%;
opacity: 1;
}
to {
margin-top: 25%;
opacity: 0;
}
}
<!-- language: lang-html -->
<div id="login">Login To Website</div>
<!-- end snippet -->
Once the anim-hide animation completes, the hidden class is applied so it should remain hidden. Yet the element still appears on the page.
I would have thought it would at least remain with an opacity of 0 but apparently that isn't happening and i do not know why.
答案1
得分: 0
[只翻译代码部分]
animation-fill-mode: forwards; /* 只有这部分 */
#login {
min-width: 150px;
min-height: 10px;
width: fit-content;
height: fit-content;
padding: 2px;
background-color: #466995;
border-radius: 1px;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
font-size: 15px;
text-align: center;
padding: 10px;
animation: anim-show .5s ease;
user-select: none;
animation-fill-mode: forwards; /* 只有这部分 */
}
英文:
with a little effort you could have found this on your own...
animation-fill-mode : forwards;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const login = document.getElementById('login');
login.addEventListener('click', onClick);
function onClick() {
login.style.animationName = "anim-hide";
login.removeEventListener('click', onClick);
}
<!-- language: lang-css -->
#login {
min-width: 150px;
min-height: 10px;
width: fit-content;
height: fit-content;
padding: 2px;
background-color: #466995;
border-radius: 1px;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
font-size: 15px;
text-align: center;
padding: 10px;
animation: anim-show .5s ease;
user-select: none;
animation-fill-mode: forwards; /* just this */
}
@keyframes anim-hide {
from {
margin-top: 0%;
opacity: 1;
}
to {
margin-top: 25%;
opacity: 0;
}
}
@keyframes anim-show {
from {
margin-bottom: 25%;
opacity: 0;
}
to {
margin-bottom: 0%;
opacity: 1;
}
}
<!-- language: lang-html -->
<div id="login">Login To Website</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论