2017-03-22 27 views
0

嘿,我正在嘗試以最一般的方式創建一個徑向菜單。 我發現徑向菜單這裏的一個例子: http://codepen.io/suez/pen/vAais 我有翻譯SCSS的CSS ,我已經試圖刪除硬派的CSS像下面使用JavaScript創建一個徑向菜單

.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>

回答

1

整體轉換需要監聽click事件裏面包裹。在原始代碼中,每當菜單啓用類時(每次單擊菜單),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; 
    } 
    }); 
});