短期間色を変えてください。JavaScript＆CSS

Question

JavaScriptを使って簡単なID検証HTMLページを作成しています。私の考えは、ユーザーが有効なID番号を入力するたびに、フォームのテキストフィールドが色を数秒間変えてから元の状態に戻ってしまうことです。

コード

<script> 
var abcArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]; 
var IDweights = [7,3,1,0,7,3,1,7,3]; 
var valuesMap = new Map(); 
for(var i=0;i<26;i++){ 
    valuesMap.set(abcArray[i],i+10); 
} 
validateID(); 

function validateID(){ 
    var idNumber = document.forms.form.idnum.value.toUpperCase(); 
    var sumOfValues = 0; 

    for(var x = 0; x < idNumber.length; x++){ 
     if(x < 3){ 
      sumOfValues += (valuesMap.get(idNumber.charAt(x))*IDweights[x]); 
     } 
     if(x > 3){ 
      sumOfValues += (parseInt(idNumber.charAt(x))*IDweights[x]); 
     } 
    } 
    if(sumOfValues % 10 == idNumber[3]){ 
     var y = document.getElementById("idnum"); 
     y.style.animation = "anim 5s"; // when true change to green 
    } else { 
     var y = document.getElementById("idnum"); 
     y.style.animation = "anim1 5s"; //change to red 
    } 
} 

それは一度だけ動作するCSSの一部

@-webkit-keyframes anim { 
0% {background:white;} 
20% {background:green;} 
100% {background:white;} 
} 
@-moz-keyframes anim { 
0% {background:white;} 
20% {background:green;} 
100% {background:white;} 
} 
@-webkit-keyframes anim1 { 
0% {background:white;} 
20% {background:red;} 
100% {background:white;} 
} 
@-moz-keyframes anim1 { 
0% {background:white;} 
20% {background:red;} 
100% {background:white;} 
} 

。もう一度[確認]ボタンをクリックすると、何も起こりません。私が間違ったもののID番号を変更したときだけ、それは一度だけうまくいってから、もう一度正しいものを入れなければならない...もう一度、私はCSSのプロパティを一度設定しているのでそれが同じであれば、ブラウザはそれらを再び変更しません。しかし、私はJSとCSSには新しいので、適切な解決策は考えられません。私はかなり長い間検索していましたが、私の問題の解決策はまだ見つかりませんでした。部分的には、それを指定する方法がわからないためでした。私はあなたの助けに感謝します。

PS。純粋なjsとcssのみを入力してください - まだjqueryに慣れていません。

Answer 1

問題は、要素が既にstyle = "anim1 5s"を持っている場合です。そのスタイルを削除してから、もう一度追加する必要があります。

まだ良い、あなたのスタイルを追加し、アニメーションが

また

function validateID() { 
    var doneAnimating = function(e) { 
     // remove the listener 
     this.removeEventListener('animationend', doneAnimating); 
     // remove the animate style 
     this.style.animate = ''; 
    } 
    var idNumber = document.forms.form.idnum.value.toUpperCase(); 
    var sumOfValues = 0; 

    for (var x = 0; x < idNumber.length; x++) { 
     if (x < 3) { 
      sumOfValues += (valuesMap.get(idNumber.charAt(x)) * IDweights[x]); 
     } 
     if (x > 3) { 
      sumOfValues += (parseInt(idNumber.charAt(x)) * IDweights[x]); 
     } 
    } 
    // moved outside of if/then to tidy up code 
    var y = document.getElementById("idnum"); 
    // add the listener to the element 
    y.addEventListener('animationend', doneAnimating); 
    if (sumOfValues % 10 == idNumber[3]) { 
     y.style.animation = "anim 5s"; // when true change to green 
    } else { 
     y.style.animation = "anim1 5s"; //change to red 
    } 
} 

を完了したときにアニメーションを削除するには、その要素にanimationendイベントリスナーを追加し、あなたは、単に（このコードの外）animationendを追加することができますイベントリスナーに一度、およびdoneAnimatingは単純にイベントリスナーを削除する心配アニメーションスタイルを削除し、することはできません - 実際には、あなたはそれを非常に簡単な

// this is done once only - not sure where in your code you'd put it 
document.getElementById("idnum").addEventListener('animationend', function(e) { 
    this.style.animate = ''; 
}); 

function validateID() { 
    var idNumber = document.forms.form.idnum.value.toUpperCase(); 
    var sumOfValues = 0; 

    for (var x = 0; x < idNumber.length; x++) { 
     if (x < 3) { 
      sumOfValues += (valuesMap.get(idNumber.charAt(x)) * IDweights[x]); 
     } 
     if (x > 3) { 
      sumOfValues += (parseInt(idNumber.charAt(x)) * IDweights[x]); 
     } 
    } 
    // moved outside of if/then to tidy up code 
    var y = document.getElementById("idnum"); 
    if (sumOfValues % 10 == idNumber[3]) { 
     y.style.animation = "anim 5s"; // when true change to green 
    } else { 
     y.style.animation = "anim1 5s"; //change to red 
    } 
} 

作るためにイベントハンドラをインラインで置くことができます