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

reload a javascript after CSS3 Animation is finished

本文关键字：加载 JavaScript 新加载 动画 CSS3      更新时间：2023-09-26

我正在制作由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。但是当我再次打字时，没有任何反应。一定是小东西。还在学习。我尝试了"返回搜索框（）"，但没有奏效。提前感谢您的帮助。

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

你需要写。

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

CSS 动画在存在具有合适选择器的元素时立即执行。这意味着当添加animation类时，它将触发动画并播放到结束，但是由于addClass只添加类，如果类已经存在，再次调用它不会真正执行某些操作，因此您需要删除该类，然后再次添加它。

如果您想在

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

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