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

以下是调用该函数的示例

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

#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类名称即可。我认为这是一种更清洁的方法。

Answer 2

您可以使用classList：

    this.classList.remove('bounceInUp'); 
    this.classList.add('bounceInUp');

这将重新应用该课程并再次发生反弹。它比setTimeout更简单，更易读。由于您使用的是关键帧，因此您可以使用classList，但每个都适用于IE10及更高版本。

在AJAX调用时无法使CSS动画生效

2 个答案: