如何使用angularJs閃爍按鈕

Question

我正在開發angularJs SPA應用程序。 我的前端html頁面在單擊時有一個按鈕，等待操作完成。 我希望用戶通知該操作正在進行中。 在操作完成之前，我正在考慮使按鈕或按鈕上的文本閃爍，或者人們可能在給定場景中使用任何其他方法。 我樂於接受按鈕上的微調按鈕或任何傳達用戶正確狀態的建議。

Answer 1

您可以通過布爾變量來實現。

例如：

$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);
    }
}

它將在按鈕內部創建旋轉效果。 您可以自己定制。