-1

我正在尝试创建一个带有回调的函数，该回调将在最后执行。基本上我将一个css类添加到一个将为其设置动画的div，并希望在动画终止时删除该div。这就是我的做法：

this.animate = function(cssClass, callback) {
        $(div).addClass(cssClass);
            callback();

    }

调用此函数时：

this.animate('animated', function () {
     $(div).remove();
}

但是，我注意到 div 在动画触发之前就被删除了。

编辑：这是css类： 

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
}
@-moz-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
}
@-o-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -o-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -o-transform: translateY(-20px);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.animated.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -o-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
    -webkit-animation-duration: 0.25s;
    -moz-animation-duration: 0.25s;
    -o-animation-duration: 0.25s;
    animation-duration: 0.25s;
}

编辑：（解决方案）我使用以下one()方法解决了这个问题：

 $(div).one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) {

    // code to execute after animation ends

    $(this).remove();
    });

希望它可以帮助其他面临同样问题的人。

4

1 回答 1

1

我建议你使用 jQuery 动画函数，它有一个complete事件回调，你可以在动画完成时连接。在动画函数上传递一组 CSS 规则。

this.animate = function(cssRules, callback) {
  $(div).animate(cssRules, 1000, "linear", function() {
    console.log('animation completed');
    callback(); //executes your callback here
  });
}

cssRules是您的论点中定义的规则cssClass；它看起来像：

{ 
  height: 200,
  width: 400,
  opacity: 0.5
}

从简单的事情开始；仅更改一个 CSS 规则，例如font-size或height。可能有一种基于 css 类的动画方法，谷歌它，你永远不知道。

请参阅页面末尾的文档（关于完整回调）：http ://api.jquery.com/animate/

希望这可以帮助，

R。

于 2013-09-22T11:48:32.883 回答