Javascript:在css动画之后继续执行

Javascript: Continue exection after css animation

本文关键字：之后 继续 执行 动画 css Javascript      更新时间：2023-09-26

我有一个带有人工智能的"自滑拼图"应用程序等。我会用它来制作一些很酷的投资组合库。

我有一个方法，只是动画立方体：

this.animateSelection = function(direction,time)
{   
    if (time===undefined) this.time=150;    
    this.moveDistance=this.cubeSize+this.spacing;
    switch (direction)
    {   
        //move right
        case 'r': $('#' + selectionName).transition({ x: '+=' +this.moveDistance +'px' },this.time);
        break;
        //move down         
        case 'd': $('#' + selectionName).transition({ y: '+=' +this.moveDistance +'px' },this.time);            
        break;
        //move left         
        case 'l': $('#' + selectionName).transition({ x: '-=' +this.moveDistance +'px' },this.time);    
        break;
        //move up           
        case 'u': $('#' + selectionName).transition({ y: '-=' +this.moveDistance +'px' },this.time);        
        break;
        //if wrong direction is given
        default:  return false;
    }
    return true;        
}

当我称之为单一时间时，一切都很酷。

但问题是：

当我做时

myClass.animateSelection('d');
alert('bla bla bla');

在动画完成之前显示警报

我的主要AI循环在50毫秒内执行，并管理大约200次移动，所以调用方法。我希望该方法保持循环的执行，直到动画完成。

回调不成功。动画方法在许多不同的情况下使用，也被各种其他方法使用。不可能让它适合IMO.

如果使用myClass.animateSelection，则脚本的执行在到达$().transition时不会停止。相反，transition将设置一些简单的transition效果的队列，这些效果将在事件循环中调用。

这被称为异步行为，其优点是脚本不会停止。然而，大多数异步函数都会将回调作为可选参数，在函数所需效果结束或失败后调用该参数。

在您的情况下，transition支持回调作为附加参数：

$.fn.transition(options, [duration], [easing], [callback]);

您必须更改animateSelection才能接受回调参数：

this.animateSelection = function(direction,time,callback)
{   
    if (time===undefined) this.time=150;
    this.moveDistance=this.cubeSize+this.spacing;
    switch (direction)
    {   
        //move right
        case 'r': $('#' + selectionName).transition({ x: '+=' +this.moveDistance +'px' },this.time,callback);
        break;
        //move right            
        case 'd': $('#' + selectionName).transition({ y: '+=' +this.moveDistance +'px' },this.time,callback);
        break;
        //move right            
        case 'l': $('#' + selectionName).transition({ x: '-=' +this.moveDistance +'px' },this.time,callback);    
        break;
        //move right            
        case 'u': $('#' + selectionName).transition({ y: '-=' +this.moveDistance +'px' },this.time,callback);        
        break;
        //if wrong direction is given
        default:  return false;
    }
    return true;        
}

并使用

myClass.animateSelection('d',undefined,function(){alert('bla bla bla');});

相反。

相关文章：