只运行一次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'); 
    } 
}); 

你必须添加项目类到你的标签。