緩和和緩解的過渡

所以我有這些漢堡包菜單圖標，除了一件事外，它們工作得很好。我想讓他們在動畫已經發生之後稍微緩慢一點。我嘗試添加緩解功能，菜單仍然快速恢復。我敢肯定，這是一些簡單的我失蹤下面來看看我的代碼：緩和和緩解的過渡

(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

緩和和緩解的過渡

回答

相關問題