从中心开始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：层叠样式表（Sass的一种实现方式）。

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。我想调整它们的宽度减小到中心。我尝试过调整它们的边距，但没有成功，如果有人能够提供一些帮助或者需要其他方法，那就太好了。

Mike

- Mike Harrison

---

try transform-origin - yaakov

Answer 1

我会使用伪元素来拆分变形动画。 演示（无脚本版本）

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

- Jakob E

Answer 2

您可以使用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链接

- Jones Joseph