使用javascript / Angular Js动画文本

Question

我想为此网站制作多个单词的动画：http://vegas.jaysalvat.com/
可用，.com ----＆gt;

这是我的问题：http://jsfiddle.net/to61vaL6/

任何人都可以告诉我，创建这样的东西的最佳方法是什么？有了这个小提琴，我可以为一个单词制作动画，我怎样才能制作更多动画呢？

app.controller('mainCtrl', function ($scope) {
    $scope.initComVal = '.com';
    $scope.comval = '';
    function changeText (){
        if($scope.comval.length === $scope.initComVal.length)
            $scope.comval = '';
        else
        {
            $scope.comval = $scope.initComVal.substring(0, $scope.comval.length+1);
            $scope.$apply();
            console.log($scope.comval);
        }
    }

    setInterval(changeText,100);
});

先谢谢

Answer 1

您可以将要显示的单词保留在数组中，然后在显示单词时迭代它们。

var app = angular.module("app", []);

app.controller('mainCtrl', function ($scope) {
    var values = ['.com', 'available'];
    var index = 0;
    $scope.comval = '';
    function changeText (){
        if(values[index].length == $scope.comval.length) {
            $scope.comval = '';
            index++;
            if (index >= values.length) {
                index = 0;
            }
        }
        else
        {
            $scope.comval = values[index].substring(0, $scope.comval.length+1);
            $scope.$apply();
            console.log($scope.comval);
        }
    }

    setInterval(changeText,100);
});

另外，请注意不要滥用棱角分明的范围。如果您刚刚开始使用AngularJS，我建议您阅读johnpapa's angular styleguide