Question

我正在制作一个里面应该有动画“汉堡包”图标的菜单。起初，我使用transform它看起来不错，但我决定添加一些更高级的动画; - ）

他们喜欢这样：

@keyframes animateFirstBar {
  0% {
    transform: translate(-50%, -200%);
  }

  50% {
    transform: translate(-50%, 0);
  }

  100% {
    transform: translateX(-50%) rotate(-45deg);
  }
}

@keyframes animateSecoundBar {
  0%, 50% {
    transform: translate(-50%, 0);
  }

  51%, 100% {
    transform: translate(-50%, 0) scaleX(.01);
  }
}

@keyframes animateThirdBar {
  0% {
    transform: translate(-50%, 200%);
  }

  50% {
    transform: translate(-50%, 0);
  }

  100% {
    transform: translateX(-50%) rotate(45deg);
  }
}

它们的用法如下：

.main-menu {
  $mainMenu: &;
  position: fixed;
  width: 300px;
  height: 100%;
  top: 0;
  left: 0;
  background: #ccc;
  transform: translateX(-100%);
  transition: $time transform ease-in;

  &--active {
    transform: none;

    #{$mainMenu}__toggle {
      transform: none;
      background: rgba(0, 0, 0, 0);
    }

    #{$mainMenu}__toggle-line {
      &:nth-of-type(1) {
        animation: $time animateFirstBar forwards;
      }

      &:nth-of-type(2) {
        animation: $time animateSecoundBar forwards;
      }

      &:nth-of-type(3) {
        animation: $time animateThirdBar forwards;
      }
    }
  }

  &__toggle {
    width: $width;
    height: $width - 1;
    position: absolute;
    right: 0;
    transform: translateX(100%);
    top: 0;
    background: yellow;
    border: 0;
    outline: 0;
    transition: $time transform ease-in, $time background linear;
    transform-origin: bottom right;
  }

  &__toggle-line {
    width: 60%;
    height: $lineHeight;
    display: block;
    background: black;
    position: absolute;
    left: 50%;
    transition: $time transform ease-in;
    top: (50% - ($lineHeight/2));

      &:nth-of-type(1) { 
        animation: none;
        transform: translate(-50%, -200%);
      }

      &:nth-of-type(2) {
        animation: none;
        transform: translate(-50%, 0);
      }

      &:nth-of-type(3) {
        animation: none;
        transform: translate(-50%, 200%);
    }
  }
}

您可以在此处查看示例：http://codepen.io/tomekbuszewski/pen/jrzKKR?editors=0100

我的问题是，我不知道如何在“退出”时恢复动画（删除--active修改器时）。我不想写另一个动画或添加另一个将随着时间的推移用JS删除的类。

Answer 1

以前我已经用转换和转换实现了这个汉堡包按钮，我认为它满足你要归档的内容。我没有使用动画制作方法。但请看一下这个片段，看看这个想法。

＆＃13;

function toggleMenu(x) {
  x.classList.toggle("change");
}

/*
Orginal article - https://github.com/trungk18/Animated-Navigation-Menu-Icons-with-CSS3
*/

＆＃13;

/*Menu container*/

.content {
  max-width: 40em;
  margin: 1em auto;
}
.icon-container {
  float: left;
  position: relative;
  cursor: pointer;
  margin: 0 5em 5em;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.bar {
  display: block;
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px auto;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 3px;
}
.change {
  /*Rotate first bar*/
  /*Fade out the second bar-*/
  /*Reduce width the second bar-*/
  /*Rotate last bar*/
}
.change.icon-5 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.change .bar-10 {
  -webkit-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
  -moz-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
  -ms-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
  -o-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
  transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
}
.change .bar-12 {
  -webkit-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
  -moz-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
  -ms-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
  -o-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
  transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
}

＆＃13;

<section class="content">
  <div class="icon-container icon-5" onclick="toggleMenu(this)">
    <span class="bar bar-10"></span>
    <span class="bar bar-11"></span>
    <span class="bar bar-12"></span>
  </div>
</section>

<!--Full pen: http://codepen.io/trungk18/pen/jrrXjz-->

＆＃13;

Answer 2

我设法解决了这个问题。我不得不添加另一个类，用JS触发它并编写另一组反向流动的动画。

动画：

@keyframes animateFirstBar {
  0% { transform: translate(-50%, $spacing * -100%); }
  60% { transform: translate(-50%, 0); }
  100% { transform: translateX(-50%) rotate(-#{$rotation}deg); }
}

@keyframes revertFirstBar {
  100% { transform: translate(-50%, $spacing * -100%); }
  60% { transform: translate(-50%, 0); }
  0% { transform: translateX(-50%) rotate(-#{$rotation}deg); }
}

@keyframes animateSecoundBar {
  0%, 60% { transform: translate(-50%, 0); }
  61%, 100% { transform: translate(-50%, 0) scaleX(.01); }
}

@keyframes revertSecoundBar {
  0%, 60% { transform: translate(-50%, 0) scaleX(.01); }
  61%, 100% { transform: translate(-50%, 0); }
}

@keyframes animateThirdBar {
  0% { transform: translate(-50%, $spacing * 100%); }
  60% { transform: translate(-50%, 0); }
  100% { transform: translateX(-50%) rotate(#{$rotation}deg); }
}

@keyframes revertThirdBar {
  0% { transform: translateX(-50%) rotate(#{$rotation}deg); }
  60% { transform: translate(-50%, 0); }
  100% { transform: translate(-50%, $spacing * 100%); } 
}

revert*Bar正在使用一个班级，animate*Bar和另一个班级。

退出时恢复动画

2 个答案: