缓和和缓解的过渡

所以我有这些汉堡包菜单图标，除了一件事外，它们工作得很好。我想让他们在动画已经发生之后稍微缓慢一点。我尝试添加缓解功能，菜单仍然快速恢复。我敢肯定，这是一些简单的我失踪下面来看看我的代码：缓和和缓解的过渡

(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"> 
 
    \t <rect x="0.11206" y="46.3329" class="st0-topbar" width="200" height="8"/> 
 
    \t <rect x="0.11206" y="96.22083" class="st0-middlebar" width="200" height="8"/> 
 
    \t <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"> 
 
    \t <rect x="0.11206" y="46.3329" class="top-arm-plus" width="200" height="8"/> 
 
    \t <rect x="0.11206" y="96.22083" class="middle-arm-plus" width="200" height="8"/> 
 
    \t <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"> 
 
    \t <rect x="0.11206" y="46.3329" class="top-arm-arrow" width="200" height="8"/> 
 
    \t <rect x="0.11206" y="96.22083" class="middle-arm-arrow" width="200" height="8"/> 
 
    \t <rect x="0.11206" y="146.10876" class="bottom-arm-arrow" width="200" height="8"/> 
 
    </g> 
 
    </svg> 
 
</body>

来源

2017-10-11 ThomasBrushel

尝试从“.2s”或“.3s”到的东西改变你的过渡期再长一点，“.5s”应该是好的。此外，您可以使用立方贝塞尔实际创建自定义速度，而不仅仅是使用默认的缓入式输出。这是一个方便的工具，为您生成一个 - http://cubic-bezier.com/#.17,.67,.83,.67

来源

2017-10-11 18:40:36

铬devtools有一个曲线编辑器，如果你有你正在检查的元素的'transition-timing-function'css属性。 – worc

缓和和缓解的过渡

回答

相关问题