我一直在尝试让我的 CSS 动画在文档检测到按键时运行。现在的目标是让 div 'box1' 从左边滑出。我设法让它与 onclick 和按钮一起工作，但我希望它在没有按钮和按键时滑出(对于具有 onkeypress 的按钮，必须首先选择该按钮才能工作)。后来我想让一些动画事件在一次按键上运行。您可能已经猜到，我正在尝试制作一种“按任意键继续”页面。也许有一个 jquery 插件，但我还没有找到任何东西。到目前为止，这是我尝试过的方法，我只是开始为文档创建按键警报。
HTML 和 Javascript
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Triggers</title>
<script type="text/javascript">
function slideIn(el){
var elem = document.getElementById(el);
elem.style.transition = "left 0.5s ease-in 0s";
elem.style.left = "0px";
}
function slideOut(el){
var elem = document.getElementById(el);
elem.style.transition = "left 0.5s ease-out 0s";
elem.style.left = "-400px";
}
document.onkeydown=onkeydownhandler;
function onkeydownhandler() {
alert("Onkey down effect...");
}
</script>
</head>
<body>
<button onclick="slideIn('box1');">Slide In</button>
<button onclick="slideOut('box1');">Slide Out</button>
<div id="box1">Content in box1... </div>
</body>
</html>
CSS
<style type="text/css">
div#box1 {
background: #9DCEFF;
width: 400px;
height: 200px;
position: absolute;
top: 50px;
left: -400px;
}
</style>
谢谢!
最佳答案
比在您的 JS 中设置过渡 css 更好的方法是在您的 CSS 中的所有相关元素上设置它，然后使用您的 javascript 设置位置 - 或者更好的是，一个类或数据属性。
不一定是你问题的答案，但我总是发现，如果问题被适本地分开，更容易找到问题所在。
关于javascript - 如何为按键设置动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24687174/