只運行一次CSS動畫

Question

我有以下CSS代碼片段，用於在用戶選擇一個輸入框時動畫/移動某些標籤文本。

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

這工作正常，但我面臨一個問題。當我選擇一個不同的輸入時，標籤文本會回到原來的位置並重疊舊文本。

我要麼要標籤文字一起消失，要麼我想讓它留在它的新位置。換句話說，它不應該回到它不活躍的位置。

Answer 1

唯一的答案就是給元素添加一個類，然後在新類上添加xyz。

例子是使用jQuery：

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

一旦你已經有了類在那裏你可以告訴元素做你的願望：

.theClass { 
    top:-20px; 
} 

這將讓你的元素-20px。你可以用香草js做到這一點：

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

你必須添加項目類到你的標籤。