AngularJS 动画与 JavaScript

Question

查看这个 JSFiddle：http://jsfiddle.net/5mUsH/3/

我正在尝试在 AngularJS 和 jQuery 中制作一个非常简单的 JavaScript 动画。 （我没有使用 CSS 动画，因为我想支持较旧的浏览器并制作更复杂的动画。）小提琴中的代码来自 AngularJS 用户指南（但略有简化）：http://docs.angularjs.org/guide/animations

但是——它不起作用！ DOM 会立即更新（没有动画）。有任何想法吗？谢谢！

这是来自 JSFiddle 的相关标记：

<div class="sample" ng-show="checked">
  Visible...
</div>

还有 JavaScript：

angular.module('App', ['ngAnimate']).animation('.sample', function() {
    return {
        enter : function(element, done) {
            element.css('opacity',0);
            jQuery(element).animate({
                opacity: 1
            }, done);

            // optional onDone or onCancel callback
            // function to handle any post-animation
            // cleanup operations
            return function(isCancelled) {
                if(isCancelled) {
                    jQuery(element).stop();
                }
            }
        },
        leave : function(element, done) {
            element.css('opacity', 1);
            jQuery(element).animate({
                opacity: 0
            }, done);

            // optional onDone or onCancel callback
            // function to handle any post-animation
            // cleanup operations
            return function(isCancelled) {
                if(isCancelled) {
                    jQuery(element).stop();
                }
            }
        },
    }
});

Answer 1

当ng-show 覆盖动画时，我以稍微不同的方式接近它。既然你想使用 jQuery：

http://jsfiddle.net/wiredprairie/5tFCZ/1/

angular.module('App', ['ngAnimate']).animation('.sample', function () {
    return {
        addClass: function (element, className, done) {
            if (className === 'hidden') {
                jQuery(element)
                    .css({
                    opacity: 1
                })
                    .animate({
                    opacity: 0
                }, 500, done);
            } else {
                done();
            }
        },
        removeClass: function (element, className, done) {
            if (className === 'hidden') {
                jQuery(element)
                    .css({
                    opacity: 0
                })
                    .animate({
                    opacity: 1
                }, 500, done);
            } else {
                done();
            }
        }
    }
});

基本上是切换hidden CSS 类，然后执行相应的动画代码。