无法通过使用jQuery切换类来触发转换

我想做一个简单的过渡，但很难用jQuery做。 我在eventListener中创建了要在JS中转换的元素，如下所示：

const searchHint = ` 
 Enter a search term to continue! 
 ` $('#search_label').append(searchHint) $('#search_hint').removeClass('invizible').addClass('make_vizible') 

在我的样式表中，我为类’invizible’和’make_vizible’提供了这些样式：

 #search_hint.invizible { color: white; transition: color 1s ease; } #search_hint.make_vizible { color: #404040; } 

据我所知，这应该会导致搜索提示元素慢慢淡入。我使用invizible类创建它，其中存在transition属性，还有要转换的属性的起始值。 然后我将类切换到具有不同颜色值的类。

会发生什么，是元素只是显示，而不是动画。

有任何想法吗？

Answer 1

有两个问题：

1. transition属性在invizible类中设置。 因此，一旦删除它，该属性就不适用。 要解决此问题，请将transition与元素ID相关联。

2. removeClass和addClass可能会应用于渲染时附加#search_hint的同一帧。 要缓解这种情况，您可以等待帧渲染，然后添加/删除该类。 我使用setTimeout和超时值零完成了这个。

 const searchHint = ` 
 Enter a search term to continue! 
 `; $('#search_label').append(searchHint); setTimeout(function() { $('#search_hint').removeClass('invizible').addClass('make_vizible'); },0); 

 #search_hint { color: white; transition: color 1s ease; } #search_hint.invizible { color: white; } #search_hint.make_vizible { color: #404040; }