文章/答案/技术大牛

发布

社区首页 >问答首页 >css切换开关+加载状态

问css切换开关+加载状态
EN

Stack Overflow用户

提问于 2017-07-24 04:01:32

回答 2查看 725关注 0票数 3

我正试着用纯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>

javascript

css

angularjs

html

回答 2

Stack Overflow用户

发布于 2017-07-24 04:55:08

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

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>

票数 0

Stack Overflow用户

发布于 2017-07-24 05:39:10

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45269382

复制

相似问题

问css切换开关+加载状态
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css切换开关+加载状态EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css切换开关+加载状态
EN