javascriptのみを使用してラジアルメニューを作成する

Question

ちょっと私は、最も一般的な方法でラジアルメニューを作成しようとしています。 私はここで、ラジアルメニューの一例を発見した：私は をCSSにSCSSを翻訳していると私は、次の

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

のような筋金入りのCSSを削除して、このようなjqueryのコードに変換しようとしてい http://codepen.io/suez/pen/vAais を：

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

これは[OK]を動作しますが、私はjqueryのコードに次のCSSを変換しようとしていたとき、私は問題に直面した：

.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方向に移動し、メニューがアクティブでない場合は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; 
    } 
    }); 
});