Question

我正在研究一个由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");
           }
    }
}

Answer 1

你需要写。

$("#SearchResult").removeClass('animation').addClass("animation");

只要存在具有拟合选择器的元素，就会执行CSS动画。这意味着当添加animation类时，它将触发动画并播放它直到结束，但是因为addClass只添加了类，并且再次调用它将不会真正做一些事情，如果类已存在，您需要删除该类，然后重新添加。

Answer 2

如果你想在CSS动画结束后重新加载一个函数，那么这样的东西应该有效。您在加载页面时必须声明事件。

$( document ).ready(function(){
     var element =  $("#SearchResult");
     $element.on('transitionend webkitTransitionEnd oTransitionEnd', function ()      {
        searchBox();
    });
});

CSS3动画完成后重新加载javascript

2 个答案: