javascript - AJAX 调用时无法使 CSS 动画正常工作

Question

所以我正在制作一个网站，并且可以在首次调用页面时使 CSS 动画起作用，但我希望它在每次调用 AJAX 函数时调用。这是有效的 javascript XML 调用

function XML(infoId)
{
var xmlHttp = xmlHttpObjCreate();
    if (!xmlHttp) {
        alert("The browser doesn't support this action.");
        return;
    }

    xmlHttp.onreadystatechange=function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            elemObj = document.getElementById('textbox');
            elemObj.innerHTML = xmlHttp.responseText;
            elemObj.className = "bounceInUp";
          }
    }

    // Append GET data to identify which quote we want
    var reqURL = "FILE_NAME_HERE_?infoId=" + infoId;
    xmlHttp.open("GET", reqURL, true);
    xmlHttp.send();
}

下面是调用函数的例子

这是名为“bounceInUp”的 CSS 动画代码

#textbox {
width: 100%;
background-color: transparent;
height: 200px;
color: #0000FF;
font-weight: bold;
font-size: 22px; 
overflow: auto;
padding: 10;


-webkit-animation: bounceInUp 1200ms ease-out;
-moz-animation: bounceInUp 1200ms ease-out;
-o-animation: bounceInUp 1200ms ease-out;
animation: bounceInUp 1200ms ease-out;

}  

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
  }

   60% {
 opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
 }

     75% {
-webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
 }

      90% {
-webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
  }

       100% {
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
   }
   }

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
  }

  60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
  }

   75% {
-webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
  }

   90% {
-webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
  }

   100% {
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
  }
 }


 .bounceInUp {
    -webkit-animation-name: bounceInUp;
      animation-name: bounceInUp;
 }

我为所有代码道歉，但我想确保这里的所有内容都可能有人需要帮助我。因此，截至目前，CSS 动画仅在首次加载页面时运行，而不是在调用 XML 函数时运行。

Answer 1

看起来您已经通过#textbox CSS 选择器附加了动画。并且您的 AJAX 调用添加了一个类名，该类名似乎具有已通过 #textbox 规则应用于文本框的完全相同的动画属性。

为了让您的动画再次触发，我怀疑您需要在发送 AJAX 调用之前清除#textbox 的动画 CSS 属性，然后您的 AJAX 调用将重新应用动画。您可以通过多种方式执行此操作，其中一种方法是创建一个单独的类来清除动画并在执行 xmlHttp.send() 之前将该类名应用于#textbox，这样文本框又回来了在来自 AJAX 调用的成功处理程序重新应用动画之前变为非动画状态。

为了简化它，您可能只想从 #textbox CSS 规则中删除动画属性，并在您希望动画运行时将 .bounceInUp 类名称应用和删除到元素。我认为这是一种更简洁的方法。