JS異步調用凍結css3動畫

我正在創建一個通過AJAX調用我們的API的webapp。JS異步調用凍結css3動畫

我沒有使用任何框架。

這裏是我不確定progress HTML（只是從Firefox積木複印件）

<progress class="pack-activity light" value="0" max="100" data-status="off"> 
</progress>

這裏是我的CSS觸發進度

progress[data-status="off"] { 
    opacity: 0; 

    -webkit-transition: opacity 1s; 
     -moz-transition: opacity 1s; 
     -ms-transition: opacity 1s; 
      transition: opacity 1s; 
} 

progress[data-status="on"] { 
    opacity: 1; 

    -webkit-transition: opacity 0.2s; 
     -moz-transition: opacity 0.2s; 
     -ms-transition: opacity 0.2s; 
      transition: opacity 0.2s; 
}

這裏是進步動畫

progress[value].pack-activity { 
    background-image: url("../img/activity.png"); 
    background-repeat: repeat; 
    background-size: auto 100%; 
    animation: 0.5s move infinite steps(15); 
} 

@-webkit-keyframes move { 
    from { background-position: 0 0; } 
    to { background-position: .64rem 0; } 
}

這個效果很好，如果我打開data-status在沒有做一個AJAX調用。

當我這樣做，動畫'凍結'，直到AJAX調用完成。（我只能觸發進度條上的要求做一個setTimeout）

window.setTimeout(function() 
{ 
inevent.personController.signIn(email.value, password.value, function(data, exception) 
{ 
    progress.setAttribute('data-status', 'off'); 

    if(exception !== undefined) 
    { 
     transition.message.setAttribute('data-status', 'on'); 

     window.setTimeout(function() 
     { 
      transition.message.setAttribute('data-status', 'off'); 
     }, 3000); 

     switch(exception.content.status) 
     { 
      case 409: 
       transition.message.innerHTML = "Please fill all fields!"; 
       break; 
      case 401: 
       transition.message.innerHTML = "Username or password incorrect!"; 
       break; 
     } 
    } 
    else 
    { 
     transition.next('home'); 
    } 
}); 
}, 200); 

progress.setAttribute('data-status', 'on');

AJAX調用

execHttp : function() { 
    try 
    { 
     return new ActiveXObject('Msxml2.XMLHTTP') 
    } 
    catch(e1) 
    { 
     try 
     { 
      return new ActiveXObject('Microsoft.XMLHTTP') 
     } 
     catch(e2) 
     { 
      return new XMLHttpRequest() 
     } 
    } 
}, 

send : function(url, callback, method, from, data, sync) { 

    var exec = this.execHttp(); 

    if(this.parent.config.sandbox) 
    { 
     url += "&sandbox=1"; 
    } 

    exec.open(method, url, sync); 

    var api = this; 

    exec.onreadystatechange = function() 
    { 
     if(exec.readyState == 4) 
     { 
      var returnData = null; 

      if(exec.responseText != "" && exec.responseText != null) 
      { 
       returnData = JSON.parse(exec.responseText); 
      } 

      if(callback[1] != null && callback[1] !== undefined) 
      { 
       try 
       { 
        callback[1](returnData, exec, from, callback[0]); 
       } 
       catch (exception) 
       { 
        console.log(exception); 

        if(api.checkCallback(callback[0])) 
        { 
         callback[0](null, exception); 
        } 
       } 
      } 
      else 
      { 
       throw from.exception.simple("A callback is required.", "Api.send"); 
      } 
     } 
     else 
     { 
      if(callback[1] != null && callback[1] !== undefined) 
      { 
       try 
       { 
        callback[1](returnData, exec, from, callback[0]); 
       } 
       catch (exception) 
       { 
        console.log(exception); 

        if(api.checkCallback(callback[0])) 
        { 
         callback[0](null, exception); 
        } 
       } 
      } 
      else 
      { 
       throw from.exception.simple("A callback is required.", "Api.send"); 
      } 
     } 
    } 

    if(method == 'POST') 
    { 
     exec.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
    } 
    else 
    { 
     exec.setRequestHeader('Content-type', 'text/plain'); 
    } 

    exec.send(data); 

},

活生生的例子：http://mauriciogiordano.com:3000/webapp/webapp/

源代碼如下：https://github.com/estudiotrilha/InEvent/tree/webapp-dev

我不知道如果有可能解決這個問題，我想知道是否有解釋。

謝謝！

來源

2014-02-05 Maurício Giordano

那個「ASYNCCALL」函數是什麼樣的？ – Pointy

代碼真的很大......我有一個登錄函數，它訪問一個API控制器，裏面有一個AJAX請求發件人所有內容都在github上。查看編輯。 –

在您的github或您已鏈接的頁面上找不到'AYSNCCALL（）'。你可以使這個更少的捉迷藏遊戲，只是指向我們的功能的實際代碼？ – jfriend00