CSS3动画完成后重新加载javascript

时间:2016-04-21 12:21:30

标签: javascript jquery css3 animation

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

2 个答案:

答案 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();
    });
});