AngularJS幸运数字生成器：如何添加进度条动画？
问题描述：
我是angularjs的新手。我已经编码这个幸运数字生成器应用程序，在点击“生成”按钮5秒后生成幸运数字。我想添加一个在5秒内完成的进度条，然后显示结果。当页面加载时，当前进度条只显示。如何避免这种情况？AngularJS幸运数字生成器：如何添加进度条动画？
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.show = true;
$scope.$timeout = $timeout;
$scope.generate = function() {
var k = Math.floor(Math.random() * 10 + 1);
if (k == $scope.userinput) {
$scope.result = "Hooray! You won $10000!";
} else {
$scope.result = "Lucky number generated: " + k + "Try again!";
}
};
});<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<style>
#progressbar {
height: 5px;
width: 100%;
background-color: red;
animation-name: prgb;
animation-duration: 5s;
}
@keyframes prgb {
0% {
width: 0%;
}
25% {
width: 25%;
}
50% {
width: 50%;
}
75% {
width: 75%;
}
100% {
width: 100%;
}
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
Enter number between 0-10: <input type="text" ng-model="userinput">
<button ng-click="$timeout(generate, 5000);">Generate</button><br><br>
<div id="progressbar" ng-show="show" ng-initialize="show=false;"></div>
<div>{{result}}</div>
</div>
</body>
</html>
答
尝试使用角度材质，将所有这些进度条指定为指令。我创建了一个码笔，请看看它可以帮助
https://codepen.io/anon/pen/yzQypK?editors=1111
参考： https://material.angularjs.org/latest/demo/progressLinear
var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function($scope, $timeout, $interval) {
$scope.show = true;
$scope.$timeout = $timeout;
$scope.determinateValue = 0;
$scope.generate = function() {
var k = Math.floor(Math.random() * 10 + 1);
if (k == $scope.userinput) {
$scope.result = "Hooray! You won $10000!";
} else {
$scope.result = "Lucky number generated: " + k + "Try again!";
}
$interval.cancel(progress);
$scope.determinateValue = 100;
};
var progress;
$scope.startProgress = function(){
$scope.result="";
$scope.determinateValue = -5;
progress = $interval(function() {
$scope.determinateValue += 2;
}, 90);
}
});
HTML
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<md-input-container>
<label>Enter number between 0-10</label>
<input ng-model="userinput">
</md-input-container>
<md-button md-raised ng-click="$timeout(generate, 5000); startProgress();">Generate</md-button>
<br>
<br>
<md-progress-linear md-mode="determinate" value="{{determinateValue}}"></md-progress-linear>
<div>{{result}}</div>
</div>
答
的栏出现直线距离是因为你只要控制器装载它是覆盖在进度条上的ng-initialize设置$scope.show到true的原因。
取而代之，删除ng-initialize="show=false;"并将$scope.show = true;更改为$scope.show = false;，这将停止加载时显示进度栏。
完成此操作后，您会发现即使点击按钮，您的进度条也不会显示。我们需要在某处设置$scope.show = true;，并在我们处于此状态时修复超时。
在您button要素变更ng-click="$timeout(generate, 5000);"到ng-click="generate()"并在控制器更改$scope.generate功能如下：
$scope.generate = function()
{
$scope.show = true;
$timeout(function()
{
var k = Math.floor(Math.random() * 10 + 1);
if (k == $scope.userinput) {
$scope.result = "Hooray! You won $10000!";
} else {
$scope.result = "Lucky number generated: " + k + " Try again!";
}
}, 5000);
};
当点击该按钮首先会显示进度条，然后触发超时延迟运行其余的逻辑。
这应该全部结果为something like this。