根据当前旋转方向，将div顺时针或逆时针旋转

Question

我有一组按钮排成一个圆圈，右侧的按钮是active按钮，并发出脉冲动画。当单击另一个按钮时，包含该按钮的div会旋转，以便您单击的按钮在右侧，并成为active按钮。

这是使用CSS transform: rotate(x);和transition完成的。

当我单击下面标记为“C”的图像时，我希望div顺时针旋转，“A”则逆时针旋转。但是由于我所做的CSS旋转方式，这并没有发生，假设圆圈已经旋转了-300度，然后改变为180度的旋转，它将“绕道而行”，而不是采取最短路线。

我需要使用JavaScript旋转div，然后根据我点击的按钮添加或减去旋转值。我已经尝试寻找方法来做到这一点，但目前还没有成功。

这里是一个fiddle展示我的当前进展。

- metaDesign

Answer 1

您可以在按钮上添加 data-rotate 属性。它们的值将被用于从当前旋转值中加或减。
默认 HTML：

<div class="col-lg" id="wheel-container">
  <div class="wheel" data-state="1">
    <ul>
      <li><div><a class="btn active" data-icon="1"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="2" data-rotate="-60"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="3" data-rotate="-120"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="4" data-rotate="180"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="5" data-rotate="120"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="6" data-rotate="60"><div></div></a></div></li>
    </ul>
  </div>
</div>

删除这部分 CSS。您不再需要它：

/* .wheel[data-state="1"] {
    transform: rotateZ(0deg);
}
.wheel[data-state="2"] {
    transform: rotateZ(-60deg);
}
.wheel[data-state="3"] {
    transform: rotateZ(-120deg);
}
.wheel[data-state="4"] {
    transform: rotateZ(180deg);
}
.wheel[data-state="5"] {
    transform: rotateZ(120deg);
}
.wheel[data-state="6"] {
    transform: rotateZ(60deg);
} */

现在，这段 jQuery 代码会检查被点击元素的 data-rotate 值，并将此值加/减到 rotate 变量中。然后，它会检查位置，并适当地重新分配每个 data-rotate 的值。

var btns = $('.btn');
var rotate = 0;

$('.btn').on('click', function(e){
  e.preventDefault();
  if ($(this).hasClass('active')) {
    //Do nothing
  } else {

    var rotateAdd = Number($(this).data('rotate'));
    rotate += rotateAdd;
    $('.wheel').css({'transform' : 'rotate(' + rotate + 'deg)'});

    // get n value
    var icon = $(this).data('icon');
    var n = icon - 1;

    // loop to rearrange the values
    for (var i = 1; i < btns.length; i++) {
       n++;
       if (n === btns.length) {
          n = 0;
       }

      // apply rotate data again
       if (i == 1) {
         $(btns[n]).data('rotate', '-60');
       } else if (i == 2) {
         $(btns[n]).data('rotate', '-120');
       } else if (i == 3) {
         $(btns[n]).data('rotate', '180');        
       } else if (i == 4) {
         $(btns[n]).data('rotate', '120');     
       } else if (i == 5) {
         $(btns[n]).data('rotate', '60');
       }

    }

    // Hide other dropdowns
    $('.active').removeClass('active');
    // Open this dropdown
    $(this).addClass('active');
  }

});

工作代码片段：

var btns = $('.btn');
var rotate = 0;

$('.btn').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('active')) {
    //Do nothing
  } else {

    var rotateAdd = Number($(this).data('rotate'));
    rotate += rotateAdd;
    $('.wheel').css({
      'transform': 'rotate(' + rotate + 'deg)'
    });

    // get n value
    var icon = $(this).data('icon');
    var n = icon - 1;

    // loop to rearrange the values
    for (var i = 1; i < btns.length; i++) {
      n++;
      if (n === btns.length) {
        n = 0;
      }

      // apply rotate data again
      if (i == 1) {
        $(btns[n]).data('rotate', '-60');
      } else if (i == 2) {
        $(btns[n]).data('rotate', '-120');
      } else if (i == 3) {
        $(btns[n]).data('rotate', '180');
      } else if (i == 4) {
        $(btns[n]).data('rotate', '120');
      } else if (i == 5) {
        $(btns[n]).data('rotate', '60');
      }

    }

    // Hide other dropdowns
    $('.active').removeClass('active');
    // Open this dropdown
    $(this).addClass('active');
  }

});

#wheel-container {
  flex: 1 1 100%;
  max-width: 100%;
  position: relative;
}

.wheel {
  width: calc(50vw - 1.875rem);
  position: relative;
  margin: auto;
}

.wheel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  padding-top: 100%;
  position: relative;
}

.wheel ul li {
  padding: 0;
  margin: 0;
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 50%;
}

.wheel ul li>div {
  width: 100%;
  height: 100%;
  position: relative;
}

.wheel ul li [data-icon] {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform-origin: 50% 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 0;
}

.wheel ul li [data-icon]>div {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
  z-index: -10;
}

.wheel ul li [data-icon]>div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
}

.wheel ul li [data-icon].active>div::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  background: rgba(0, 173, 239, 0.5);
  transform: translate(-50%, -50%);
  animation-name: pulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-direction: alternate;
  border-radius: 50%;
}

@keyframes pulse {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  50% {
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

.wheel ul li:nth-child(1) {
  transform: translateY(-50%);
}

.wheel ul li:nth-child(2) {
  transform: translateY(-50%)rotateZ(60deg);
}

.wheel ul li:nth-child(3) {
  transform: translateY(-50%)rotateZ(120deg);
}

.wheel ul li:nth-child(4) {
  transform: translateY(-50%)rotateZ(180deg);
}

.wheel ul li:nth-child(5) {
  transform: translateY(-50%)rotateZ(240deg);
}

.wheel ul li:nth-child(6) {
  transform: translateY(-50%)rotateZ(300deg);
}

.wheel[data-state] {
  transition: transform 1s ease-in-out;
  transform-origin: 50% 50%;
}

.wheel[data-state="1"] {
  transform: rotateZ(0deg);
}

.wheel[data-state="2"] {
  transform: rotateZ(-60deg);
}

.wheel[data-state="3"] {
  transform: rotateZ(-120deg);
}

.wheel[data-state="4"] {
  transform: rotateZ(180deg);
}

.wheel[data-state="5"] {
  transform: rotateZ(120deg);
}

.wheel[data-state="6"] {
  transform: rotateZ(60deg);
}

.wheel ul li:nth-child(1) [data-icon]>div::after {
  background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat;
}

.wheel ul li:nth-child(2) [data-icon]>div::after {
  background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat;
  transform: rotateZ(-60deg);
}

.wheel ul li:nth-child(3) [data-icon]>div::after {
  background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat;
  transform: rotateZ(-120deg);
}

.wheel ul li:nth-child(4) [data-icon]>div::after {
  background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat;
  transform: rotateZ(-180deg);
}

.wheel ul li:nth-child(5) [data-icon]>div::after {
  background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat;
  transform: rotateZ(-240deg);
}

.wheel ul li:nth-child(6) [data-icon]>div::after {
  background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat;
  transform: rotateZ(-300deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg" id="wheel-container">
  <div class="wheel" data-state="1">
    <ul>
      <li>
        <div>
          <a class="btn active" data-icon="1">
            <div></div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a class="btn" data-icon="2" data-rotate="-60">
            <div></div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a class="btn" data-icon="3" data-rotate="-120">
            <div></div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a class="btn" data-icon="4" data-rotate="180">
            <div></div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a class="btn" data-icon="5" data-rotate="120">
            <div></div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a class="btn" data-icon="6" data-rotate="60">
            <div></div>
          </a>
        </div>
      </li>
    </ul>
  </div>
</div>

- Azametzin