Question

所以我有这些汉堡菜单图标，除了一件事，它们工作得很好。动画播放完毕后，我希望他们放松一点。我尝试添加缓出功能，菜单仍然快速快速恢复。我确定它很简单，我很遗憾以下是我的代码：

＆＃13;

(function() {
  var burgerarrow, burgercross, burgerplus;

  burgercross = document.getElementById('burger-cross');

  burgerplus = document.getElementById('burger-plus');

  burgerarrow = document.getElementById('burger-sidearrow');

  burgercross.addEventListener('click', function() {
    return burgercross.classList.toggle('st0-active-two');
  });

  burgerplus.addEventListener('click', function() {
    return burgerplus.classList.toggle('st0-active-plus');
  });

  burgerarrow.addEventListener('click', function() {
    burgerarrow.classList.toggle('st0-active-arrow');
    return console.log('it\'s activeted');
  });

}).call(this);

＆＃13;

body {
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  text-align: center;
}

#burger-cross {
  max-height: 100px;
}

.st0-active-two .st0-topbar {
  -webkit-transform: rotate(34deg) translate(42px, -38px);
  transform: rotate(34deg) translate(42px, -38px);
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
}

.st0-active-two .st0-middlebar {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.st0-active-two .st0-bottombar {
  -webkit-transform: rotate(-34deg) translate(-59px, -14px);
  transform: rotate(-34deg) translate(-59px, -14px);
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
}

#burger-plus {
  max-height: 100px;
}

.st0-active-plus .top-arm-plus {
  -webkit-transform: rotate(0deg) translate(21px, 38px);
  transform: rotate(0deg) translate(21px, 38px);
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
}

.st0-active-plus .middle-arm-plus {
  display: none;
}

.st0-active-plus .bottom-arm-plus {
  -webkit-transform: rotate(-91deg) translate(-183px, -30px);
  transform: rotate(-91deg) translate(-183px, -30px);
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
}

#burger-sidearrow {
  max-height: 100px;
  cursor: pointer;
}

.st0-active-arrow .top-arm-arrow {
  -webkit-transform: rotate(0deg) translate(21px, 38px);
  transform: rotate(0deg) translate(21px, 38px);
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-animation: .3s fade-out-slide-in forwards;
  animation: .3s fade-out-slide-in forwards;
  -webkit-transition-delay: .8s;
  transition-delay: .8s;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.st0-active-arrow .middle-arm-arrow {
  -webkit-transform: rotate(-147deg) translate(-237px, -32px) scale(0.78);
  transform: rotate(-147deg) translate(-237px, -32px) scale(0.78);
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.st0-active-arrow .bottom-arm-arrow {
  -webkit-transform: rotate(-28deg) translate(-2px, 66px) scale(0.78);
  transform: rotate(-28deg) translate(-2px, 66px) scale(0.78);
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

@-webkit-keyframes fade-out-slide-in {
  from {
    -webkit-transform: translate(-64px, 38px);
    transform: translate(-64px, 38px);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(21px, 38px);
    transform: translate(21px, 38px);
  }
}

@keyframes fade-out-slide-in {
  from {
    -webkit-transform: translate(-64px, 38px);
    transform: translate(-64px, 38px);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(21px, 38px);
    transform: translate(21px, 38px);
  }
}

＆＃13;

<body>
  <h2>Burger Cross</h2>
  <svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger-cross">
    <g id="icon_x5F_hamburger">
    	<rect x="0.11206" y="46.3329" class="st0-topbar" width="200" height="8"/>
    	<rect x="0.11206" y="96.22083" class="st0-middlebar" width="200" height="8"/>
    	<rect x="0.11206" y="146.10876" class="st0-bottombar" width="200" height="8"/>
    </g>
    </svg>


  <h2>Plus Burger</h2>
  <svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger-plus">
    <g id="icon_x5F_hamburger">
    	<rect x="0.11206" y="46.3329" class="top-arm-plus" width="200" height="8"/>
    	<rect x="0.11206" y="96.22083" class="middle-arm-plus" width="200" height="8"/>
    	<rect x="0.11206" y="146.10876" class="bottom-arm-plus" width="200" height="8"/>
    </g>
    </svg>

  <h2>Side Arrow</h2>
  <svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger-sidearrow">
    <g id="icon_x5F_hamburger">
    	<rect x="0.11206" y="46.3329" class="top-arm-arrow" width="200" height="8"/>
    	<rect x="0.11206" y="96.22083" class="middle-arm-arrow" width="200" height="8"/>
    	<rect x="0.11206" y="146.10876" class="bottom-arm-arrow" width="200" height="8"/>
    </g>
    </svg>
</body>

＆＃13;

Answer 1

尝试从＆＃34; .2s＆＃34;更改过渡时间。或＆＃34; .3s＆＃34;到了更长的时间，＆＃34; .5s＆＃34;应该是好的。此外，您可以使用cubic-bezier实际创建自定义速度，而不仅仅使用默认的缓入区。这是一个方便的工具，可以为您生成一个 - http://cubic-bezier.com/#.17,.67,.83,.67

过渡舒适和缓和

1 个答案: