我正在研究一个由javascript动作控制的CSS3动画,到目前为止,该脚本仅运行一次。我似乎无法重新加载脚本,因此它再次以默认位置启动:
这是javascript:
function searchBox() {
var searchstring = document.getElementById('search').value;
var target = document.getElementById('SearchResult');
if (searchstring.length > 0) {
$("#SearchResult").addClass("animation");
} else {
if (searchstring.length == 0) {
$("#SearchResult").addClass("animation_back");
}
}
}
因此它从<input>
文本字段连接到仅在DIV上具有不透明度更改的CSS,问题是只能工作一次。当我在框中键入文本时,它会更改DIV的不透明度,当我删除文本时,它会再次隐藏(不透明度0.0)DIV。但是当我再次输入时,没有任何反应。一定是小事。还在学习。我尝试了一个&#34;返回searchbox()&#34;但那没用。在此先感谢您的帮助。
这是css:
@keyframes SearchResult {
from { opacity: 0; }
to { opacity: 1; }
}
.animation_SearchResult{
animation-name: SearchResult;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes SearchResult_back {
from { opacity: 1; }
to { opacity: 0; }
}
.animation_SearchResult_back{
animation-name: SearchResult_back;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
这是HTML
<input class="searchbox" type="text" id="search" onkeyup="searchBox()">
<div class="searchresultcontainer" id="SearchResult"></div>
此时的搜索结果容器只保留红色背景
#SearchResult{
background-color: red;
}
将功能更改为实际工作(谢谢GMchris):
function searchBox() {
var searchstring = document.getElementById('search').value;
var target = document.getElementById('SearchResult');
if (searchstring.length > 0) {
$("#SearchResult").removeClass("animation_back").addClass("animation");
} else {
if (searchstring.length == 0) {
$("#SearchResult").removeClass("animation").addClass("animation_back");
}
}
}
答案 0 :(得分:3)
你需要写。
$("#SearchResult").removeClass('animation').addClass("animation");
只要存在具有拟合选择器的元素,就会执行CSS动画。这意味着当添加animation
类时,它将触发动画并播放它直到结束,但是因为addClass
只添加了类,并且再次调用它将不会真正做一些事情,如果类已存在,您需要删除该类,然后重新添加。
答案 1 :(得分:3)
如果你想在CSS动画结束后重新加载一个函数,那么这样的东西应该有效。您在加载页面时必须声明事件。
$( document ).ready(function(){
var element = $("#SearchResult");
$element.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
searchBox();
});
});