javascript - 如何用angularJs闪烁按钮

Question

我正在开发 angularJs SPA 应用程序。我的前端 html 页面有一个按钮，点击它等待操作完成。我希望用户通知操作正在进行中。在操作完成之前，我正在考虑使按钮或按钮上的文本闪烁或人们可能在给定场景中使用的任何其他方法。我愿意接受一些建议，比如按钮上的微调器或任何向用户传达正确状态的东西。

Answer 1

您可以通过 bool 变量实现这一点。

例如:

$scope.inProgress = false;
$scope.someAction = someAction;

function someAction(){
   $scope.inProgress = true;

   //action here
   //on result
   $scope.inProgress = false;
}

操作完成后将变量设置为false。

在 html 中

    <button>
      <span ng-if="!inProgress">
        Submit
      </span>
      <span ng-if="inProgress">
        In progress
        <i class="glyphicon glyphicon-refresh glyphicon-spin"></i>
      </span> 
    </button>

添加一些样式

button{
  padding:5px;
}
button span{
  margin-left: 10px;
}
.glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

它将在按钮内部创建一个旋转效果。您可以自己定制。