CSSアニメーションを1回だけ実行する

Question

私は次のCSSスニペットを使用して、ユーザーが入力ボックスを選択したときにラベルテキストをアニメーション/移動することができます。

input:focus ~ label, input.used ~ label { 
    top: -20px; 
    transform: scale(.75); left: -2px; 
    color: #4a89dc; 
} 

これはうまくいきますが、私は問題に直面しています。別の入力を選択すると、ラベルテキストは元の位置に戻って元のテキストと重なって表示されます。

ラベルのテキストをすべて一緒に消してもらいたい、または新しい位置に残したいと思っています。言い換えれば、それは非アクティブな位置に戻ってはならない。

Answer 1

唯一の答えは、要素にクラスを追加し、次に新しいクラスdo xyzに追加することです。

例は、使用するjQueryのようになります：

あなたが望むようにあなたがする要素を伝えることができそこにクラスを持ったら

$('label').on('focus',function(){ 
    $(this).addClass('theClass'); 
}); 

：

.theClass { 
    top:-20px; 
} 

これはあなたの要素を維持します-20px。

document.getElementById('label').addEventListener('focus', function() { 
if (this.classList.contains('item')) { 
    this.classList.add('item-off'); 
    } 
}); 

ラベルにアイテムクラスを追加する必要があります。