CSS切换开关+加载状态

Question

我正在尝试使用纯CSS制作一个开关。到目前为止，我已经做出来了，但我想添加第三种状态“待处理”，这是在“打开”和“关闭”之间的中间状态（通常，在切换开/关时会有数据处理延迟）。因此，我希望在那个“待处理”状态的白色圆圈上有一个旋转图标。

我已经尝试了很多方法，但迄今为止没有什么令人满意的结果。

以下是只有两个状态的基本代码。我该如何修改它以实现我的目标呢？谢谢。

function ToogleStateCtrl($scope) {
  $scope.plugin = {
    enabled: false
  }

  $scope.toggleState = function() {
    console.log('toggling from ' + $scope.plugin.enabled + ' to ' + !$scope.plugin.enabled);
    $scope.plugin.pending = true;
    //delay to simulate pending state
    setTimeout(doToggle, 2000);
  }

  function doToggle() {
    console.log('do toggling')
    $scope.plugin.pending = false;
    $scope.plugin.enabled = !$scope.plugin.enabled;
    $scope.$apply()
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 22px;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid red;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch-slider.enabled {
  border-color: green;
  background-color: green;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.switch-slider.enabled:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ToogleStateCtrl">
    <div id="srv-state" class="switch vertical-center" ng-click="toggleState()">
      <div class="switch-slider" ng-class="{'disabled' : !plugin.enabled , 'enabled': plugin.enabled, 'pending': plugin.pending, 'loaded': !plugin.pending}"></div>
    </div>
  </div>
</div>

- Ulky Igor

Answer 1

我已经成功改变了控件的颜色，在类加载中放入适当的动画。

function ToogleStateCtrl($scope) {
  $scope.plugin = {
    enabled: false
  }

  $scope.toggleState = function() {
    console.log('toggling from ' + $scope.plugin.enabled + ' to ' + !$scope.plugin.enabled);
    $scope.plugin.pending = true;
    //delay to simulate pending state
    $scope.change='loading';
    setTimeout(doToggle, 2000);
  }

  function doToggle() {
    console.log('do toggling')
    $scope.plugin.pending = false;
    $scope.plugin.enabled = !$scope.plugin.enabled;
    $scope.change='loading_completed';
    $scope.$apply()
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 22px;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid red;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch-slider.enabled {
  border-color: green;
  background-color: green;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.loading:before
{
 background-color: blue;
}

.loading_completed:before
{
 background-color: white;
}

.switch-slider.enabled:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ToogleStateCtrl">
    <div id="srv-state" class="switch vertical-center" ng-click="toggleState()">
      <div class="switch-slider {{change}}" ng-class="{'disabled' : !plugin.enabled , 'enabled': plugin.enabled, 'pending': plugin.pending, 'loaded': !plugin.pending}"></div>
    </div>
  </div>
</div>

- Sumangal Mandal

---

那实际上就是问题所在……添加一个动画。假设我想让它一直旋转，直到加载完成。怎么做呢？（请看下面我的评论，尝试了一个不起作用的方法 :/） - Ulky Igor

Answer 2

@Sumangal，这实际上就是问题所在...添加动画。 假设我想让它一直旋转，直到加载完成。怎么做呢？

这是我尝试过的方法：添加了一个关键帧并使用了“animation”CSS属性，但得到了不想要的行为！ :/

function ToogleStateCtrl($scope) {
  $scope.plugin = {
    enabled: false
  }

  $scope.toggleState = function() {
    console.log('toggling from ' + $scope.plugin.enabled + ' to ' + !$scope.plugin.enabled);
    $scope.plugin.pending = true;
    //delay to simulate pending state
    $scope.change='loading';
    setTimeout(doToggle, 2000);
  }

  function doToggle() {
    console.log('do toggling')
    $scope.plugin.pending = false;
    $scope.plugin.enabled = !$scope.plugin.enabled;
    $scope.change='loading_completed';
    $scope.$apply()
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 22px;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid red;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch-slider.enabled {
  border-color: green;
  background-color: green;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.loading:before
{
 border-style: dashed;
 animation: spin 2s infinite linear
}

.loading_completed:before
{
 background-color: white;
}

.switch-slider.enabled:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);

  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ToogleStateCtrl">
    <div id="srv-state" class="switch vertical-center" ng-click="toggleState()">
      <div class="switch-slider {{change}}" ng-class="{'disabled' : !plugin.enabled , 'enabled': plugin.enabled, 'pending': plugin.pending, 'loaded': !plugin.pending}"></div>
    </div>
  </div>
</div>

- Ulky Igor