Question

我想做一个简单的过渡，但是很难用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'和'make_vizible'提供了这些样式：

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

#search_hint.make_vizible {
  color: #404040;
}

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

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

有什么想法吗？

Answer 1

有两个问题：

transition属性设置在invizible类中。因此，一旦删除它，该属性就不适用。要解决此问题，请将transition与元素ID相关联。
removeClass和addClass可能会应用于渲染时附加#search_hint的同一帧。要缓解这种情况，您可以等待帧渲染，然后添加/删除该类。我已使用超时值为零的setTimeout完成此操作。

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="search_label">

</div>

＆＃13;

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

1 个答案: