javascript - 仅使用 javascript 创建径向菜单

Question

嘿，我正在尝试以最通用的方式创建一个径向菜单。我在这里找到了一个径向菜单的例子: http://codepen.io/suez/pen/vAais我已经将 SCSS 翻译成 css我试过像下面这样删除硬核 css

.rotater:nth-child(1) {
  transform: rotate(-20deg);
}

并将其转换为 jquery 代码，如下所示:

     var rotateDegreeOne     = -20;
     for(var i=1;i<10;i++){
        $('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');
        rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
    }

这工作正常，但是当我尝试将以下 css 转换为 jquery 代码时，我遇到了一个问题:

.menu.active .rotater:nth-child(1) .btn-icon {
  transform: translateY(-10em) rotate(20deg);
}

.menu.active .rotater:nth-child(2) .btn-icon {
  transform: translateY(-10em) rotate(-20deg);
}


.menu.active .rotater:nth-child(3) .btn-icon {
  transform: translateY(-10em) rotate(-60deg);
}


.menu.active .rotater:nth-child(4) .btn-icon {
  transform: translateY(-10em) rotate(-100deg);
}


.menu.active .rotater:nth-child(5) .btn-icon {
  transform: translateY(-10em) rotate(-140deg);
}


.menu.active .rotater:nth-child(6) .btn-icon {
  transform: translateY(-10em) rotate(-180deg);
}


.menu.active .rotater:nth-child(7) .btn-icon {
  transform: translateY(-10em) rotate(-220deg);
}


.menu.active .rotater:nth-child(8) .btn-icon {
  transform: translateY(-10em) rotate(-260deg);
}


.menu.active .rotater:nth-child(9) .btn-icon {
  transform: translateY(-10em) rotate(-300deg);
}

将其转换为以下代码:

var rotateDegreeTwo     = 20;
  var rotateDifferenceTwo = -40;
for(var i=1;i<10;i++){
   $('.menu.active .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
    rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
  }

问题是上面的代码根本不起作用，也没有生成上面的 css 代码。

附上我的代码现状:

$(document).ready(function() {
  $(".trigger").click(function() {
    $(".menu").toggleClass("active"); 
  });
  var rotateDegreeOne     = -20;
  var rotateDegreeTwo     = 20;
  var rotateDifferenceOne = 40;
  var rotateDifferenceTwo = -40;
  for(var i=1;i<10;i++){
    $('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');
   $('.menu.active .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
    rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
    rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
  }
});

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
}

.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.menu {
  width: 5em;
  height: 5em;
}
.menu .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  z-index: -10;
  cursor: pointer;
  transition: opacity 1s, z-index 0.3s, transform 1s;
  transform: translateX(0);
}
.menu .btn .fa {
  font-size: 3em;
  transition: color 0.3s;
}
.menu .btn:hover .fa {
  color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger {
  opacity: 1;
  z-index: 100;
  cursor: pointer;
  transition: transform 0.3s;
}
.menu .btn.trigger:hover {
  transform: scale(1.2);
}
.menu .btn.trigger:hover .line {
  background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
  background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger .line {
  width: 60%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  transition: background-color 0.3s, transform 0.3s;
}
.menu .btn.trigger .line:before {
  top: -12px;
  transform-origin: 15% 100%;
}
.menu .btn.trigger .line:after {
  top: 12px;
  transform-origin: 25% 30%;
}
.menu .rotater {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}
.menu.active .btn-icon {
  opacity: 1;
  z-index: 50;
}
.menu.active .trigger .line {
  height: 0px;
  top: 45%;
}
.menu.active .trigger .line:before {
  transform: rotate(45deg);
  width: 110%;
}
.menu.active .trigger .line:after {
  transform: rotate(-45deg);
  width: 110%;
}


/*.menu.active .rotater:nth-child(1) .btn-icon {
  transform: translateY(-10em) rotate(20deg);
}


.menu.active .rotater:nth-child(2) .btn-icon {
  transform: translateY(-10em) rotate(-20deg);
}


.menu.active .rotater:nth-child(3) .btn-icon {
  transform: translateY(-10em) rotate(-60deg);
}


.menu.active .rotater:nth-child(4) .btn-icon {
  transform: translateY(-10em) rotate(-100deg);
}


.menu.active .rotater:nth-child(5) .btn-icon {
  transform: translateY(-10em) rotate(-140deg);
}


.menu.active .rotater:nth-child(6) .btn-icon {
  transform: translateY(-10em) rotate(-180deg);
}


.menu.active .rotater:nth-child(7) .btn-icon {
  transform: translateY(-10em) rotate(-220deg);
}


.menu.active .rotater:nth-child(8) .btn-icon {
  transform: translateY(-10em) rotate(-260deg);
}


.menu.active .rotater:nth-child(9) .btn-icon {
  transform: translateY(-10em) rotate(-300deg);
}*/

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div class="btn trigger">
    <span class="line"></span>
  </div>
  <div class="icons">
    <div class="rotater">
      <div class="btn btn-icon" name="fa-codepen">
        <i class="fa fa-codepen" name="fa-codepen"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-facebook"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-google-plus"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-twitter"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-dribbble"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-linkedin"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-github"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-behance"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-behance"></i>
      </div>
    </div>
  </div>
</div>

Answer 1

整个转换需要包装在点击事件的监听器中。在原始代码中，每次菜单激活类时(每次单击菜单时)，CSS 都会转换按钮。在您的版本中，它只发生一次，即文档准备就绪时。为了模仿这种行为，您需要每次都转换按钮。现在，如果菜单处于事件状态，我们将其旋转一种方式并平移 y，如果菜单处于非事件状态，则将其旋转回来。

  $(document).ready(function() {
    $(".trigger").click(function() {
      $(".menu").toggleClass("active"); 

      var rotateDegreeOne     = -20;
      var rotateDegreeTwo     = 20;
      var rotateDifferenceOne = 40;
      var rotateDifferenceTwo = -40;
      for(var i=1;i<10;i++){
       $('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');

       if ($(".menu").hasClass("active")) {
         $('.menu .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
       } else { 
         $('.menu .rotater:nth-child('+i+') .btn-icon').css('transform','rotate('+(rotateDegreeTwo*-1)+'deg)')
       }
       rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
       rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
    }
  });
});