Question

我想使用angularjs做简单的连续效果。我可以在jquery中执行此操作，但我只是不知道使用angularjs执行相同操作的路径。

为了使事情具体化，这里是一个简单的基于jquery的顺序效果，我想用angularjs创建。当我们单击标记时，另一个标记的文本值将按顺序设置为数组的每个元素一段固定的持续时间。一个jsfiddle原型是在

其javascript代码为

var wordlist = ['A', 'B', 'C', 'D', 'E'];
var duration = 200;
var i = 0;

show_next_word = function () {
    if (i < wordlist.length) {
        $('#word').hide()
            .text(wordlist[i++])
            .fadeIn()
            .delay(duration)
            .fadeOut(show_next_word // recursively call until end of word list  
        );
    } else {
        i = 0; // re-set index
    }
};

$('#startbutton').click(show_next_word);

为了做同样的事情，我坦率地不确定甚至是什么树开始吠叫。

从我的搜索到目前为止，我发现了使用$q service关于链接承诺的讨论。这是我应该考虑的吗？谁能指点我一个有效的例子？如果这不是最好的方法，那么$animate更合适吗？还有什么我应该考虑的吗？任何更好的方式的指针将不胜感激。

P.S。这个问题是基于这个answer的建议，它指出“当你遇到一个问题，你认为你已经知道如何在jQuery中解决，在你达到$之前，试着考虑如何在AngularJS的范围内做。如果你不知道，请问！“我有一个问题，我知道如何在jquery中解决。我想做有角度的方式。我试着想一想这个问题，鉴于我对angularjs缺乏经验，我很茫然，所以这就是我要问的原因。

Answer 1

只要你将它们保存在指令中，AngularJS方式完全不可知你如何执行动画和DOM操作。在组件上执行动画后，您可以使用指令和其他指令一遍又一遍地重用该组件 - 并且在将来的使用中将从您的实现细节中抽象出来。也就是说，在你的指令中 - 使用Angular功能来帮助你。

也就是说，使用Angular IMO执行此操作的最佳实践方法是使用CSS动画并使用ngAnimate挂钩来检测转换。

基本上ngAnimate服务会在您输入元素时为其添加类。请参阅the documentation here。

Answer 2

这是一个使用ngAnimate和setinterval

的简单示例

http://plnkr.co/edit/inSQLEULXdtK3w5XcBoS?p=preview

和另一个使用指令和你的jquery动画代码

http://plnkr.co/edit/IAoKNunaXcbMW64O7Foy?p=preview

什么是＆＃34; angularjs方式＆＃34;应用连续效应？

2 个答案: