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>

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>

Answer 2

@Sumangal 嗯，这实际上是这里的问题......添加动画。 假设我希望它一直旋转到 loading_completed。怎么办？

这是我尝试过的：添加了一个关键帧并使用“动画”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>