質問編集履歴

1 実際のコードの全体表示をした

退会済みユーザー

退会済みユーザー

2016/03/23 19:06  投稿

単語帳アプリで次の問題配列に行く際に答えが一瞬見えてしまう解決方法
いつもありがとうございます。
javascriptの英語から日本語にする単語帳アプリなのですが、カードの答えである日本語(裏面)を出したままで、next問題のボタンをクリックすると、次の問題の答えが一瞬見えてから次の問題の英単語が出てきてしまい、その解消のためのコードについて質問させて下さい。
なぜopenのとき(裏返しのとき)に、flip();の先にsetCardをもってきているのでしょうか。裏返しになっているときに、次の配列がきてしまったらその時点で次の回答が見えてしまい、そしてその次にflip();だとすると順番が逆に思えてしまいました。
flip();で裏返したあとに次の問題配列を表示させるようにflip();を先に記載してからsetCardを行うのではないのでしょうか。よろしくお願いします。
flip();で裏返したあとに次の問題配列を表示させるようにflip();を先に記載してからsetCardを行うのではないのでしょうか。
よろしくお願いします。
ーーーーーーーーーーーーーー
scriptタグだけではわからないと思いまして最低限styleタグも記載してます。(デザインは省略)
ーーーーーーーーーーーーーー
スタイル部分
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Flash Cards</title>
 <style>
 body {
   margin: 0;
   background: #e0e0e0;
   text-align: center;
   font-family: Verdana, sans-serif;
   color: #fff;
 }
 #btn {
   width: 200px;
   margin: 0 auto;
   padding: 7px;
   border-radius: 5px;
   background: #00aaff;
   box-shadow: 0 4px 0 #0088cc;
   cursor: pointer;
 }
 #btn:hover {
   opacity: 0.8;
 }
 #card {
   margin: 60px auto 20px;  
   width: 400px;  
   height: 100px;  
   cursor: pointer;  
   font-size: 38px;  
   line-height: 100px;  
   perspective: 100px;
   transform-style: preserve-3d;
   transition: transform .8s;
 }
 #card-front, #card-back {
   display: block;  
   width: 100%;  
   height: 100%;  
   border-radius: 5px;  
   position: absolute;
   backface-visibility: hidden;
 }
 #card-front {
   background: #fff;  
   color: #333;
 }
 #card-back {
   background: #00aaff;  
   transform: rotateY(180deg);
 }
 .open {
   transform: rotateY(180deg);
 }
 </style>
</head>  
<body>  
 <div id="card">  
   <div id="card-front"></div>  
   <div id="card-back"></div>  
 </div>  
 <div id="btn">NEXT</div>  
 <script>
 (function() {
   'use strict';
   var words = [
     {'en': 'read', 'ja': '読む' },
     {'en': 'write', 'ja': '書く' },
     {'en': 'eat', 'ja': '食べる' },
     {'en': 'run', 'ja': '走る' },
     {'en': 'walk', 'ja': '歩く' }
   ];
   var card = document.getElementById('card');
   var cardFront = document.getElementById('card-front');
   var cardBack = document.getElementById('card-back');
   var btn = document.getElementById('btn');
   card.addEventListener('click', function() {
     flip();
   });
   btn.addEventListener('click', function() {
     next();
   });
   function next() {
     if (card.className === 'open') {
       card.addEventListener('transitionend', setCard);
       flip();
     } else {
       setCard();
     }
   }
   function setCard() {
     var num = Math.floor(Math.random() * words.length);
     cardFront.innerHTML = words[num]['en'];
     cardBack.innerHTML = words[num]['ja'];
     card.removeEventListener('transitionend', setCard);
   }
   setCard();
   function flip() {
     card.className = card.className === '' ? 'open' : '';
   }
 })();
 </script>
</body>
</html>
</html>
  • JavaScript

    38578 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    17746 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    5519 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る