javascript - 根据当前旋转顺时针或逆时针旋转 div

Question

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

这是使用 CSS transform: rotate(x); 和 transition

完成的

当我单击下面标记为“C”的图像时，我希望 div 顺时针旋转，而“A”逆时针旋转。但这并没有发生，因为我是如何进行 CSS 旋转的，假设圆圈旋转了 -300 度，然后变为 180 度旋转，它将“绕远路”旋转，而不是采用最短路线。

我需要使用 JavaScript 旋转 div，然后根据我单击的按钮从旋转中添加或减去值。我试过寻找方法来做到这一点，但到目前为止没有运气。

这是一个 fiddle显示我当前的进度

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>