Javascript Can'；t通过使用jQuery切换类来触发转换

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

const searchHint = `
  <h3 id="search_hint" class="invizible">
    Enter a search term to continue!
  </h3>
`
$('#search_label').append(searchHint)
$('#search_hint').removeClass('invizible').addClass('make_vizible')

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

发生的情况是，元素只是显示，而不是动画

有什么想法吗？

有两个问题：

transition

属性在

invizible

类中设置。因此，一旦删除它，该属性就不适用。要解决此问题，请将

转换关联到元素id

渲染时，

removeClass

和

addClass

可能会应用到附加

#search_hint

的同一帧。为了缓解这种情况，可以等待帧渲染，然后添加/删除该类。我使用超时值为零的

setTimeout

完成了此操作

const searchHint=`
输入搜索条件以继续！
`;
$（'search_label'）。追加（searchHint）；
setTimeout（函数（）{
$（'search_hint'）.removeClass（'invizible'）.addClass（'make_vizible'）；
},0);
#搜索提示{
颜色：白色；
过渡：颜色1s轻松；
}
#搜索提示不可修改{
颜色：白色；
}
#搜索提示{
颜色：#404040；
}

有两个问题：

transition
属性在
invizible
类中设置。因此，一旦删除它，该属性就不适用。要解决此问题，请将
转换关联到元素id

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


const searchHint=`
输入搜索条件以继续！
`;
$（'search_label'）。追加（searchHint）；
setTimeout（函数（）{
$（'search_hint'）.removeClass（'invizible'）.addClass（'make_vizible'）；
},0);
#搜索提示{
颜色：白色；
过渡：颜色1s轻松；
}
#搜索提示不可修改{
颜色：白色；
}
#搜索提示{
颜色：#404040；
}

您必须在超时时间内包装类的更改，以便浏览器有时间重新绘制等。您必须在超时时间内包装类的更改，以便浏览器有时间重新绘制等。
#search_hint.invizible {
  color: white;
  transition: color 1s ease;
}

#search_hint.make_vizible {
  color: #404040;
}