Question

在app.controller启动的下方，console.log语句（angular.js代码的第四行）将输出呈现给控制台。任何人都可以解释为什么动画代码没有实现？ hg-repeat指令是否允许重复div部分内的元素？将不胜感激任何一种帮助。感谢

app.js

var app = angular.module('TarasDeli', ['ngAnimate']);

DivInfo = [
{
    image: "SomeImage",
    time: "At /n" + "6:00 AM...",
    Happenstance: "Shop opens up /n" + "Chefs prepare",

},
{
    image: 'SomeImage',
    time: "At /n" + "11:30 AM.../n" + "...12:00 PM/n" + "...12:30 PM/n" + "...1:00 PM/n",
    Happenstance: "Students flood Deli /n" + "For Lunch",
},
{
    image: 'SomeImage',
    time: "At /n" + "4:00 AM/n",
    Happenstance: "Deli Closes",
}
    ];

Angular.js代码分开app.js

app.controller('FadeInOut', function(){

    this.mainDivs = DivInfo;

});
app.animation('.repeated-item', [function(){
        console.log('I work');

                return {

                    enter: function(element, done){
                        element.css('opacity', 0);
                        $(element).animate({
                            opacity: 1
                        }, done);

                    },

                    leave: function(element, done){
                        element.css('opacity', 1);
                        $(element).animate({
                            opacity: 0
                        }, done);

                    }
                };
}]);

HTML

angular.js表达式反映了上面DivInfo数组中的对象。第一个图像显示在视图中，但另外两个图像假设在执行enter方法的视图中出现。并且angular.js代码似乎不会将DivInfo数组中的最后两个图像渲染到视图中。另外，我通过node.js下载了角度动画模块并将其作为依赖项。依赖的脚本位于最底层且正确（双重检查）。

<div id = 'Carousel-Inner' ng-controller = 'FadeInOut as DivCarousel'>
<div ng-repeat = 'mainDiv in DivCarousel.mainDivs' class = 'repeated-item'>
<img ng-src = "{{ mainDiv.image }}" /> 
<span>{{ mainDiv.time }}</span>
<p>{{ mainDiv.happenstance }}</p>
</div>
</div>

脚本取决于

<script src = "http://code.jquery.com/jquery-1.11.1.js"></script>
<script type = 'text/javascript' src = '../node_modules/angular/angular.min.js'></script>
<script src = "../node_modules/angular-animate/angular-animate.min.js"></script>
<script type = "text/javascript" src = '../app.js'></script>
<script src = '../Js/Deli.js'></script>
<script src = '../Js/MappingSys.js'></script>

Answer 1

如果没有一个完整的例子，弄清楚什么是错的，所以如果我误解了这一点，我会道歉。这是我从您的代码中汇总的演示：

http://jsfiddle.net/y2aosL35/1/

根据文档，ng-repeat的动画事件为enter，leave和move：https://docs.angularjs.org/api/ng/directive/ngRepeat

因此，向DivInfo数组中添加项目将触发enter动画（我使用$ timeout，以帮助在演示中明确说明）

你如何实际从你的javascript文件中获取angular.js动画代码来激活？

1 个答案: