在CSS3动画完成后重新加载JavaScript

我正在研究由javascript动作控制的CSS3动画，到目前为止，该脚本只能工作一次。我似乎无法得到重新加载脚本，以便它在其默认位置重新开始：在CSS3动画完成后重新加载JavaScript

这是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>文本字段连接到只需有CSS DIV上的不透明度变化，问题是只能使用一次。当我在框中键入文本时，它会改变DIV的不透明度，当我删除文本时，它会再次隐藏（不透明度为0.0）DIV。但是当我再次输入时，没有任何反应。一定是小事。仍在学习。我尝试了一个“返回搜索框（）”，但没有奏效。在此先感谢您的帮助。

这里是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"); 
      } 
    } 
}

来源

2016-04-21 Ewald Bos

添加您的CSS有问题请 – Sachink

这也有助于添加您的html元素和用于绑定事件的代码。 – Seth

您需要编写。

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

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

来源

2016-04-21 12:25:16 GMchris

是的，这听起来很符合逻辑，所以我添加了removeClass，但它仍然不起作用，它只显示一次，之后不再显示。 –

其实你在哪里，但我不得不添加removeClass 2次;有一次，当我打电话给一个人显示DIV和一次当我关闭DIV时。 –

如果你想在CSS动画完成后重新加载一个函数，这样的事情应该可以工作。当你加载页面时，你必须声明事件。

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

来源

2016-04-21 12:27:22 QoP

对不起，我真的不明白在哪里放置这个或如何在页面中使用它。我仍然倾斜 –

我编辑了答案 – QoP

在CSS3动画完成后重新加载JavaScript

回答

相关问题