Question

我有一个切换按钮可将网站背景颜色从黑色切换为白色（反之亦然）。它工作正常，但是当我点击它时，我希望滑块缓慢移动（在1秒内，而不是立即）。代码：

var change = function() {
  var backgr = document.body,
  slider = document.getElementById('slider');

  if (backgr.style.backgroundColor == 'white') {
    backgr.style.backgroundColor = 'black';
    slider.style.float = 'right';
  } else {
    backgr.style.backgroundColor = 'white';
    slider.style.float = 'left';
  }
}

body {
  background-color: black;
}

#toggle {
  width: 30px;
  height: 16px;
  background-color: orange;
  padding: 0;
  border: none;
  border-radius: 16px;
}

#slider {
  width: 14px;
  height: 14px;
  background-color: white;
  margin: 1px;
  border-radius: 50%;
  float: right;
}

<button id='toggle' onclick="change()">
  <span id='slider'></span>
</button>

Answer 1

我不是使用按钮，而是重新打开这样的复选框。这很方便，因为它跟踪自己的布尔值。

然后根据是否检查你可以做任何事情。

下面我使用了转换和过渡来为滑动设置动画，你可以在CSS中看到它。

＆＃13;

.switch[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 30px;
  height: 16px;
  background-color: orange;
  border-radius: 16px;
}

.switch[type=checkbox]::after {
  content: '';
  position: absolute;
  background: #FFF;
  transition: all .2s ease-in-out;
  border-radius: 7px;
  width: 14px;
  height: 14px;
  margin: 1px;
}

.switch[type=checkbox]:checked::after {
  transform: translateX(14px);
}

＆＃13;

<input type="checkbox" onchange="toggleChange(event)" class="switch" />

＆＃13;

'use strict';

angular.module("umbraco")
   .controller('Administration.AdministrationTree.EditController', function administrationEditController($scope, $routeParams, $http) {
      //set a property on the scope equal to the current route id
      $scope.id = $routeParams.id;
      $scope.url = "";
      $scope.canShow = false;

      $scope.showIframe = function () {
         if ($scope.url === "") {
            return false;
         }

         return true;
      };

      $scope.canShow = false;

      if (!$scope.id) {
         return;
      }

      $http.get('/umbraco/backoffice/administration/CustomSection/GetUrl/?node=' + $scope.id)
         .success(function (data) {

            $scope.url = JSON.parse(data);
            $scope.canShow = $scope.url;
         });
   });

＆＃13;

我希望这有用。

Answer 2

不确定是否必须为background-color或按钮设置动画，以便我通过CSS过渡进行动画制作，因此请保留所需内容。

对于按钮，我只是更改margin-right（通过calc()）保留float: right（无法设置动画）

JS部分也得到了简化：在body元素上切换一个类就足够了，你可以不用Javascript来保持你的风格，这样你的代码就更难以实现了。

   
var body = document.body;
var change = function() {
  body.classList.toggle('active');
}

body {
  background-color: black;
  transition: background-color 1s;
}
body.active {
  background-color: white;
}

#toggle {
  width: 30px;
  height: 16px;
  background-color: orange;
  padding: 0;
  border: none;
  border-radius: 16px;
}

#slider {
  width: 14px;
  height: 14px;
  background-color: white;
  margin: 1px;
  transition: margin 1s;
  border-radius: 50%;
  float: right;
}

.active #slider {
   margin-right: calc(100% - 15px);
}

<button id='toggle' onclick="change()">
  <span id='slider'></span>
</button>

Answer 3

使用transition: left 1000ms ease; 和position: relative;

然后更改脚本中的left属性，而不是更改float：

＆＃13;

var change = function() {
  var backgr = document.body,
    slider = document.getElementById('slider');

  if (backgr.style.backgroundColor == 'white') {
    backgr.style.backgroundColor = 'black';
    slider.style.left = 0; // NEW LINE
  } else {
    backgr.style.backgroundColor = 'white';
    slider.style.left = "15px"; // NEW LINE
  }
}

＆＃13;

body {
  background-color: black;
}

#toggle {
  width: 30px;
  height: 16px;
  background-color: orange;
  padding: 0;
  border: none;
  border-radius: 16px;
}

#slider {
  width: 14px;
  height: 14px;
  background-color: white;
  margin: 1px;
  border-radius: 50%;
  float: left; /* NEW LINE */
  position: relative; /* NEW LINE */
  transition: left 1000ms ease; /* NEW LINE */
  left: 0; /* NEW LINE */
}

＆＃13;

<button id='toggle' onclick="change()">
      <span id='slider'></span>
</button>

＆＃13;

Answer 4

而不是浮动，我认为你应该使用可以与转换一起使用的css。例如，如果您将sldier放置在一个位置，您可以在1秒的持续时间内添加一个位置的转换，它将按您的需要工作

切换按钮动画

4 个答案: