Question

我有这个HTML：

<div ng-repeat="item in items"  class="fade">
    {{item}}
</div>

和JS：

app.animation('fade', function() {
    return {
        setup : function(element) {
            alert("abc");
            element.css({'opacity': 0}); 
        },
        enter : function(element, done, memo) {
            alert("def");
            element.animate({'opacity': 1}, function() {
                done(); 
            });
        }
    };
});

引发错误：

Error: [$injector:modulerr] Failed to instantiate module HR due to: 
[$animate:notcsel] Expecting class selector starting with '.' got 'fade'.

我可以通过执行app.animation('.fade', function() {来摆脱错误，但警报不会触发。

任何人都知道发生了什么？在此先感谢您的帮助。

Answer 1

对不起，如果我有点晚了，但我想我找到了解决方案。

该名称需要为.fade，因为错误状态如下：

app.animation('.fade', function() {
    return {
        setup : function(element) {
            alert("abc");
            element.css({'opacity': 0}); 
        },
        enter : function(element, done, memo) {
            alert("def");
            element.animate({'opacity': 1}, function() {
                done(); 
            });
        }
    };
});

在javascript动画下查看更多here

Answer 2

角度版本1.2.0中的动画功能不支持设置

尝试使用以下代码：

  app.animation('fade', function() {
        return {

            enter : function(element, done, memo) {
                alert("def");
                element.animate({'opacity': 1}, function() {
                    done(); 
                });
            }
        };
    });

以下是工作示例：

Working Example of Javascript Animation in Angular js 1.2.0

使用角度版本1.2.0的javascript进行ng-animate

2 个答案: