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');
  });

这是它的作用笔： https://codepen.io/mikehdesign/pen/eWJKKN

目前，当菜单处于活动状态时，顶部和底部div.bar将宽度减小到左侧的0。我想调整它，以便将宽度减小到中心。我曾尝试弄乱他们的利润，但没有运气，如果有人可以提出一些建议或建议采用不同的方法，如果需要的话会很棒。

麦克

Answer 1

我会使用伪元素来分割变换动画。 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); }        
    }
}

Answer 2

您可以使用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); } } }上下（+和 - ），如下面的代码所示：

INSERT INTO tableName
    (column1,column2,column3,column4)
VALUES
    ('value1' , 'value2', 'value3','value4'),
    ('value1' , 'value2', 'value3','value4'),
    ('value1' , 'value2', 'value3','value4');

检查出来：JsFiddle Link

CSS过渡div宽度从中心

2 个答案: