Question

当文档检测到按键时，我一直在努力让我的CSS动画运行。现在的目标是使div'box1'从左侧滑出。我设法让它与onclick和按钮一起使用，但是我希望它在没有按钮和按键的情况下滑出（使用具有onkeypress的按钮，必须首先选择按钮才能工作）。后来我想在一个按键上运行几个动画事件。你可能已经猜到了，我试图做出某种“按任意键继续”页面。也许有一个jquery插件但我没有找到任何东西。这是我到目前为止所尝试的内容，我只是为文档创建了一个警告onkeypress。

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>

谢谢！

Answer 1

比在JS中设置转换css更好的方法是在CSS中的所有相关元素上设置它，然后用你的javascript设置位置 - 或者更好的是类或数据属性。

不一定是您问题的答案，但如果问题得到妥善分离，我总会发现更容易找到错误。

如何动画onkeypress？

1 个答案: