來自中心的CSS過渡div寬度

Question

我正在製作一個小菜單動畫，沒有什麼突破性的，但只是作爲一個實驗。這是我目前有：

HTML

<div class="menu"> 
    <div class="bar"></div> 
    <div class="bar"></div> 
    <div class="bar"></div> 
    <div class="bar"></div> 
</div> 

SCSS

div.menu { 
    width: 24px; 
    height: 24px; 
    position: relative; 
    margin: 48px; 
    cursor: pointer; 

    div.bar { 
    display: block; 
    width: 100%; 
    height: 2px; 
    background-color: #444; 
    position: absolute; 
    transition: all 0.25s ease-in-out; 

    &:nth-child(1) { 
    } 

    &:nth-child(2) { 
    top: 11px; 
    } 

    &:nth-child(3) { 
    top: 11px; 
    } 

    &:nth-child(4) { 
    bottom: 0; 
    } 
    } 

    &.active { 

    div.bar { 
     &:nth-child(1) { 
     width: 0; 
    } 

    &:nth-child(2) { 
     transform: rotate(-45deg); 
    } 

    &:nth-child(3) { 
    transform: rotate(45deg); 
    } 

    &:nth-child(4) { 
    width: 0; 
    } 
    } 
    } 
} 

JAVASCRIPT

var menu = document.querySelector('.menu'); 

menu.addEventListener('click', function(){ 
    menu.classList.toggle('active'); 
    }); 

一ND這是它在行動筆： https://codepen.io/mikehdesign/pen/eWJKKN

目前，當菜單是活動的頂部和底部div.bar其寬度減小到0到左側。我想調整這個，使它們的寬度減少到中心。我曾嘗試過爲他們打理利潤，但沒有運氣，如果任何人可以擺脫一些光線或建議一個不同的方法，如果需要，這將是偉大的。

Mike

Answer 1

您可以使用transform-origin做到這一點：

相對於你的尺寸就將是12px上下（+和 - ）如下面的代碼：

&.active { 
    div.bar { 
    &:nth-child(1) { 
     transform-origin:12px 12px; 
     transform: scale(0); 
    } 

    &:nth-child(2) { 
     transform: rotate(-45deg); 
    } 

    &:nth-child(3) { 
     transform: rotate(45deg); 
    } 

    &:nth-child(4) { 
     transform-origin:12px -12px; 
     transform: scale(0); 
    } 
    } 
} 

檢查了這一點：JsFiddle Link

Answer 2

我將使用僞元素來分解變換動畫。 Demo (no script version)

HTML（注意只有三個酒吧）

<input type="checkbox" id="toggle-menu" hidden> 
<label for="toggle-menu" class="menu"> 
    <div class="bar"></div> 
    <div class="bar"></div> 
    <div class="bar"></div> 
</label> 

SCSS

// two step transition  
// as translate and rotation can't (yet) be animated individually 
// we use the pseudo elements to split up the animation 
// 
// - bar elements will handle the vertical transform 
// - :after elements will handle rotation/scale 

// variables to control transition time and delay 
$transition-time: 300ms; 
$transition-delay: 300ms; 

.menu { 
    width: 24px; 
    height: 24px; 
    position: relative; 
    cursor: pointer; 
    display: block; 
} 
.bar { 
    height: 2px; 
    position: absolute; 
    top: 50%; 
    width:100%; 

    // Entering `hamburger` state 
    // 1) add a delay on bars to wait for the :after elements to rotate/scale back 
    // 2) the :after elements have no delay 
    transition: $transition-time $transition-delay; // 1 

    &:after { 
     content:''; 
     display:table; 
     background: black; 
     position: inherit; width: inherit; height:inherit; 
     transition: $transition-time; // 2 
    } 

    // transform the bars into hamburger 
    &:nth-child(1){ transform: translateY(-8px); } 
    &:nth-child(3){ transform: translateY(8px);}  
} 

// when toggle-menu checkbox is checked transform to `X` 
[id="toggle-menu"]:checked ~ .menu { 
    .bar { 
     // Entering `X` state 
     // 1) to animate bars to the center we simply remove the transform 
     // 2) as we are now animating backwards we switch the transition 
     //  on the bars and their :after elements 
     transform: none; // 1 
     transition: $transition-time; // 2 
     &:after { transition: $transition-time $transition-delay } // 2 

     // rotate the top and bottom :after elements 
     &:nth-child(1):after{ transform: rotate(-45deg); } 
     &:nth-child(3):after{ transform: rotate(45deg);}   

     // hide the middle :after by scaling to zero 
     // (when all bars are at the center) 
     &:nth-child(2):after{ transform: scale(0); }   
    } 
}