CSS3动画完成后重新加载javascript

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

因此，它从

文本字段连接到CSS，而CSS在DIV上只是有一个不透明度的变化，问题是它只工作一次。当我在框中键入文本时，它会更改DIV的不透明度，当我删除文本时，它会再次隐藏（不透明度0.0）DIV。但当我再次打字时，什么也没发生。一定是小东西。还在学习。我尝试了一个“returnsearchbox（）”，但没有成功。提前感谢你的帮助

以下是css：

@关键帧搜索结果{
从{opacity:0；}
到{opacity:1；}
}
.动画搜索结果{
动画名称：SearchResult；
动画持续时间：1s；
动画计时功能：放松；
动画填充模式：正向；
}
@关键帧搜索结果返回{
从{opacity:1；}
到{不透明度：0；}
}
.animation\u SearchResult\u back{
动画名称：SearchResult\u back；
动画持续时间：1s；
动画计时功能：放松；
动画填充模式：正向；
}

这是HTML

<input class="searchbox" type="text" id="search" onkeyup="searchBox()">
<div class="searchresultcontainer" id="SearchResult"></div>

将函数更改为该值实际上起到了作用（谢谢您）：

你需要写作

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

---

只要存在带有配件选择器的元素，就会执行CSS动画。这意味着当添加

动画

类时，它将触发动画并播放到其结束，但是由于

添加类

仅添加该类，如果该类已经存在，则再次调用该类不会真正起作用，您需要删除该类，然后再次添加它。

如果您希望在CSS动画完成后重新加载函数，则类似的操作应该有效。您还必须在加载页面时声明事件

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

---

请添加有问题的CSS。为元素添加html以及用于将事件绑定到元素的代码也很有帮助。是的，听起来确实合乎逻辑，所以我添加了removeClass，但它仍然不能工作。它显示了一次，以后不再显示。实际上，你是对的，但我必须添加removeClass两次；一次是我打电话给那个显示DIV的人，一次是我关闭DIV的时候。对不起，我真的不知道该把这个放在哪里，或者如何在页面中使用它。我还在学习

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