过渡缓入和缓出

所以我有这些汉堡菜单图标，除了一件事之外，它们工作得很好。我希望他们在动画已经发生后稍微慢一点。我尝试添加缓和，菜单仍然很快恢复。我确定这是我缺少的简单东西以下是我的代码：

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

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

<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>

尝试将过渡持续时间从".2s"或".3s"更改为更长一点，".5s"应该很好。此外，您不仅可以使用默认的缓入，还可以使用立方贝塞尔创建自定义速度。这是一个方便的工具，可以为您生成一个 - http://cubic-bezier.com/#.17,.67,.83,.67

相关内容

最新更新

热门标签：