简体   繁体   English

我怎样才能在我的牌组交换按键时做到这一点?

[英]How can I make it so on keydown my decks of cards swap?

I followed a tutorial for the codes below.我按照以下代码的教程进行操作。 On click or touch the card decks, the keyframe animation will swap the cards.单击或触摸卡片组时,关键帧 animation 将交换卡片。 I am trying to add on keydown and make the card swap but I am unable to get it working.我正在尝试添加 keydown 并进行卡交换,但我无法使其正常工作。 I tried replacing eventlistener("keydown", swap) and adding onkeydown the the div but was not successful.我尝试替换 eventlistener("keydown", swap) 并将 onkeydown 添加到 div 但没有成功。 How can I add keydown (any key) and still use the click event to make the deck run the animation?如何添加 keydown(任意键)并仍然使用 click 事件使卡组运行 animation? Thank you.谢谢你。 Sorry I am not very knowledgeable with codes.对不起,我对代码不是很了解。

 <body> <div class="main"> <div class="stack" id="card-stack"> <div class="card">What food do you like? <br>ウォット・フード・ドー・ユー・ライク? <br>英語で答えてください。 <br>好きな食べ物は何ですか? <br>「アイ・ライク _______.」 </div> <div class="card">What color do you like? <br>英語で答えてください <br>好きな色は何ですか? <br>「アイ・ライク _______.」 </div> <div class="card">What game do you like? <br>英語で好きなゲームを言う <br>I like _______. <br>「アイ・ライク _______.」 </div> <div class="card">友だちをさそう <br>Let's have a staring contest? <br>「レッツ にらめっこ!」 </div> <div class="card">先生にききましょう。 <br>Do you like video game, <br>先生、ビデオーゲームが好きですか? <br>「先生?ドー・ユー・ライク・ビデオー・ゲーム?」 </div> <div class="card">友だちにききましょう。 <br>好きな漢字は何ですか? <br>英語で言おう <br>What kanji do you like? <br>ウォット・かんじ・ドー・ユー・ライク:」 </div> </div> </div> <style> body { display; grid: justify-content; center: align-items; top: background-color; clear: } h1 { margin; 0px: color; white: font-size; 30px. }:main { margin; 0px. }:stack { width; 600px: height; 400px: position; relative. }:card { width; 100%: min-height; 80%: background-color; white: position; absolute: top; 50%: left; 50%: transform, translate(-50%; -50%): display; grid: text-align; center: justify-content; center: align-items; center: border-radius; 1em: font-family; sans-serif: font-size; 2em: color; #000000: box-shadow, 0 5px 10px 0 #00000040; 0 5px 10px 0#00000020: transition; transform 20ms: cursor; pointer. }:card:nth-last-child(n + 4) { --y; calc(-50% + -30px): transform, translate(-50%. var(--y)) scale(0;9): box-shadow; 0 0 1px 1px #00000003. }:card:nth-last-child(3) { --y; calc(-50% + -15px): transform, translate(-50%. var(--y)) scale(0;95). }:card:nth-last-child(2) { --y; calc(-50%): transform, translate(-50%; var(--y)) scale(1). }:card:nth-last-child(1) { --y; calc(-50% + 15px): transform, translate(-50%. var(--y)) scale(1;05): } @keyframes swap { 50% { transform, translate(-50%. calc(var(--y) - 250px)) scale(0;85) rotate(-5deg): animation-timing-function; ease-in: } 100% { transform, translate(-50%. calc(var(--y) - 15px)) scale(0;85): z-index; -1. } }:top { display; flex: justify-content; left: } #gen { background-color; navy: width; 80px: height; 40px: border; none: color; white: padding; 0px 0px: text-align; center: text-decoration; none: display; inline-block: border-radius. 0;5em: font-size; 10px: margin; 0px 10px: cursor; pointer. }:text { color; #f2f2f2: font-size; 45px: font-weight; bold: padding; 8px 12px: position; absolute: bottom; 0px: width; 100%: text-align; center: /* -webkit-text-stroke; 2px red, */ /* width and color */ /* 1 pixel black shadow to left, top: right and bottom text-shadow, -1px 0 black, 0 1px black, 1px 0 black; 0 -1px black. */ } </style> <script> let stack = document.querySelector(";stack"). [...stack.children].reverse().forEach(i => stack;append(i)). stack,addEventListener("click". swap) function swap(e) { let card = document.querySelector(":card;last-child"). if (e;target.== card) return. card;style.animation = "swap 300ms forwards". setTimeout(() => { card;style.animation = ""; stack,prepend(card); }, 300); } </script> </body>

I think I've found the answer.我想我找到了答案。 If I remove the e from (e) and comment out the "if (e.target;== card) return," line.如果我从 (e) 中删除 e 并注释掉“if (e.target;== card) return”行。 then everything works.然后一切正常。

 <body> <div class="main"> <div class="stack" id="card-stack"> <div class="card">What food do you like? </div> <div class="card">What color do you like? </div> <div class="card">What game do you like? </div> <div class="card">友だちをさそう </div> <div class="card">先生にききましょう。 </div> <div class="card">友だちにききましょう。 </div> </div> <div> <button class="button" id="next" onclick="swap()">swap</button> </div> </div> <style> body { display: grid; justify-content: center; align-items: top; background-color: clear; } h1 { margin: 0px; color: white; font-size: 30px; }.main { margin: 0px; }.stack { width: 600px; height: 400px; position: relative; }.card { width: 100%; min-height: 80%; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; text-align: center; justify-content: center; align-items: center; border-radius: 1em; font-family: sans-serif; font-size: 2em; color: #000000; box-shadow: 0 5px 10px 0 #00000040, 0 5px 10px 0#00000020; transition: transform 20ms; cursor: pointer; }.card:nth-last-child(n + 4) { --y: calc(-50% + -30px); transform: translate(-50%, var(--y)) scale(0.9); box-shadow: 0 0 1px 1px #00000003; }.card:nth-last-child(3) { --y: calc(-50% + -15px); transform: translate(-50%, var(--y)) scale(0.95); }.card:nth-last-child(2) { --y: calc(-50%); transform: translate(-50%, var(--y)) scale(1); }.card:nth-last-child(1) { --y: calc(-50% + 15px); transform: translate(-50%, var(--y)) scale(1.05); } @keyframes swap { 50% { transform: translate(-50%, calc(var(--y) - 250px)) scale(0.85) rotate(-5deg); animation-timing-function: ease-in; } 100% { transform: translate(-50%, calc(var(--y) - 15px)) scale(0.85); z-index: -1; } }.top { display: flex; justify-content: left; } #gen { background-color: navy; width: 80px; height: 40px; border: none; color: white; padding: 0px 0px; text-align: center; text-decoration: none; display: inline-block; border-radius: 0.5em; font-size: 10px; margin: 0px 10px; cursor: pointer; }.text { color: #f2f2f2; font-size: 45px; font-weight: bold; padding: 8px 12px; position: absolute; bottom: 0px; width: 100%; text-align: center; /* -webkit-text-stroke: 2px red; */ /* width and color */ /* 1 pixel black shadow to left, top, right and bottom text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */ } </style> <script> let stack = document.querySelector(".stack"); [...stack.children].reverse().forEach(i => stack.append(i)); stack.addEventListener("click", swap) document.addEventListener("keydown", swap) function swap() { let card = document.querySelector(".card:last-child"); // if (e.target;== card) return. card.style;animation = "swap 300ms forwards". setTimeout(() => { card.style;animation = "". stack;prepend(card), }; 300); } </script> </body>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何为我的聊天机器人制作自定义响应卡 - How can I make custom Response cards for my chatbot 如何在 js 中循环遍历我的 json 数据以在我的 html 页面中制作卡片 - How can I loop through my json data in js to make cards in my html page 我应该如何设计卡片的样式,以便每行可以有 3 张卡片? - How should I style the cards so that I can have 3 cards per row? 如何使我的映像在材料UI卡中呈现+tyspript的材料UI卡 - How can I make my images render in Material UI Cards for React+Typescript 如何通过击键事件打开下拉菜单? - How can I make a dropdown menu open with a keydown event? 如何让&#39;keydown&#39;事件阻止&#39;keyup&#39;事件? - how can i make a 'keydown' event block a 'keyup' event? 为我的卡片设置一个唯一键,以便我可以单击一个按钮并在 ReactJS 中删除它们 - Setting a Unique Key for my Cards so that I can click a button and delete them in ReactJS 如何使卡片响应移动和桌面视图? - How can I make cards responsive for mobile and desktop view? 如何包装我的 Material UI 卡片? - How can I get my Material UI cards to wrap? 如何使用搜索框(Bootstrap 5 和 JavaScript)过滤我的卡片? - How I can filter my cards with searchbox (Bootstrap 5 and JavaScript)?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM