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