如何動畫onkeypress？

我一直在試圖讓我的CSS動畫在文檔檢測到按鍵時運行。現在的目標是讓div'box1'從左側滑出。我設法讓它與onclick和按鈕一起工作，但是我希望它在沒有按鈕和按鍵的情況下滑動（按鈕有onkeypress，必須先選擇按鈕才能工作）。稍後我想在一個按鍵上運行一些動畫事件。你可能已經猜到了，我正在嘗試做一種「按任意鍵繼續」的頁面。也許有一個jQuery插件，但我沒有找到任何東西。這是我到目前爲止所嘗試的，我只能爲文檔創建一個alert onkeypress。如何動畫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>

謝謝！

來源

2014-07-10 Leto

比在JS中設置轉換css更好的方法是將其設置在CSS中的所有相關元素上，然後使用javascript設置position或更好的類或數據屬性。

不一定是您的問題的答案，但我總是發現，如果關注點被正確分開，找到問題更容易。

來源

2014-07-10 22:23:06 crypticsymbols

好吧，但有幾件事我不明白。如果我說，兩個div盒，一個在左邊，另一個在右邊。我想讓左側隱藏的那個出現在右側，反之亦然。我怎麼能爲他們兩個設置一個轉換？但仍然..我想知道一個觸發按鍵事件的方式.. – Leto

如何動畫onkeypress？

回答

相關問題