如何解决DOM @keyframes 移动隐藏效果
这将成为我想在教育示例项目中使用的模块的一部分,我试图让 Welcome 从左到右再向上,每次我按下按钮,试图用命令控制运动但它不起作用。 要求:
- 仅使用 javascript(禁止使用 jquery 或其他)。
- 不要使用location.reload()或window.history.go()。
有解决方案还是不可能?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
0% {
top: 250px; left: 0px;
}
50% {
top: 250px; left: 300px;
}
100% {
top: 20px; left: 300px;
}
}
#mh1 {
position: absolute;
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes hide {
0% {
opacity: 1;
height: 100%;
line-height: 100%;
padding: 20px;
margin-bottom: 10px;
}
75% {
opacity: 0;
height: 100%;
line-height: 100%;
padding: 20px;
margin-bottom: 10px;
}
100% {
opacity: 0;
height: 0px;
line-height: 0px;
padding: 0px;
margin-bottom: 0px;
}
}
#idesc {
padding: 20px;
margin-bottom: 10px;
animation-name: hide;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-play-state: paused;
}
@keyframes show {
100% {
opacity: 1;
height: 0px;
line-height: 0px;
padding: 0px;
margin-bottom: 0px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('#but').addEventListener('click',myfunc,false);
function myfunc(event) {
const element2 = document.querySelector('#idesc');
element2.style.animationName = 'show';
const element = document.querySelector('#int');
element.style.animationPlayState = 'initial';
element.innerHTML='<h1 id="mh1">Welcome!</h1>';
setInterval(function(){
const element2 = document.querySelector('#idesc');
element2.style.animationName = 'hide';
element2.style.animationPlayState = 'running';
},3000);
element2.style.animationName = "none";
element.style.animationName = "none";
element2.style.animationPlayState = 'initial';
}
});
</script>
</head>
<body>
<div id="idh">
<button id="but">hello
</button>
</div>
<div id="idesc">
<div id="int"></div>
<div id="int2"></div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。