Question

我试图使用纯css制作一个toogle开关。到目前为止我已经开始工作，但我想添加第三个状态＆＃34;等待＆＃34;在＆＃34; on＆＃34;之间的中间状态和＆＃34;关＆＃34; （通常，切换开/关时数据处理会有延迟）。因此，我希望在该待定状态下的白色圆圈上有一个微调器。

到目前为止，我尝试了许多事情但没有任何满足感。

这是只有两个状态的基本代码。我怎样才能将其修改为我想要的？感谢。

＆＃13;

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()
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

css切换开关+加载状态

2 个答案: