过渡缓入和缓出

Question

So I have these hamburger menu icons and they are working just fine except for one thing.所以我有这些汉堡菜单图标，除了一件事之外，它们工作得很好。 I'd like them to ease out a little slower after the animation has already taken place.I've tried adding ease-out and the menu still snaps back really fast.我希望它们在动画已经发生后缓出一点。我尝试添加缓出，但菜单仍然很快恢复。 I'm sure it's something simple I'm missing Here is a look at my code:我确定这是我遗漏的一些简单的东西下面是我的代码：

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

Answer 1

Try changing your transition duration from ".2s" or ".3s" to something a tad longer, ".5s" should be about good.尝试将过渡持续时间从“.2s”或“.3s”更改为稍长一些，“.5s”应该差不多。 Also, rather than just using the default ease-in-out, you can actually create a custom speed using cubic-bezier.此外，您不仅可以使用默认的缓入缓出，还可以使用三次贝塞尔曲线创建自定义速度。 Here is a handy tool that generates one for you - http://cubic-bezier.com/#.17,.67,.83,.67这是一个方便的工具，可以为您生成一个 - http://cubic-bezier.com/#.17,.67,.83,.67

过渡缓入和缓出

问题描述

1 个解决方案

解决方案1
1 2017-10-11 18:40:36

过渡缓入和缓出

问题描述

1 个解决方案

解决方案1 1 2017-10-11 18:40:36

解决方案1
1 2017-10-11 18:40:36