我試圖通過將底部和頂部線轉換到中間然后旋轉成 X 并希望在單擊 X 時反轉影片來為漢堡選單設定影片。使用 jquery 我切換類選單打開和選單關閉。當我洗掉選單關閉影片的 CSS 時，它會觸發得很好，但是當我將 CSS 添加回來時，影片只會跳到最后一幀。它形成了我想要的東西，但只是拒絕完全使用影片。
CSS
.navbar .mobile-menu.menu-open .line::before {
animation: menu-open-top 250ms linear forwards;
}
.navbar .mobile-menu.menu-open .line {
animation: menu-middle 250ms linear forwards;
}
.navbar .mobile-menu.menu-open .line::after {
animation: menu-open-bottom 250ms linear forwards;
}
.navbar .mobile-menu.menu-closed .line::before {
animation: menu-open-top 250ms linear reverse;
}
.navbar .mobile-menu.menu-closed .line {
animation: menu-middle 250ms linear reverse;
}
.navbar .mobile-menu.menu-closed .line::after {
animation: menu-open-bottom 250ms linear reverse;
}
影片片
@keyframes menu-open-top {
30% {
bottom: 0;
}
60% {
bottom: 0;
transform: rotate(0) translate(0);
}
100% {
transform: rotate(45deg) translate(5px, 5px);
visibility: visible;
}
}
@keyframes menu-middle {
40% {
visibility: hidden;
}
to {
visibility: hidden;
}
}
@keyframes menu-open-bottom {
30% {
top: 0;
}
60% {
top: 0;
transform: rotate(0) translate(0);
}
100% {
transform: rotate(-45deg) translate(6px, -6px);
visibility: visible;
}
}
JS
$(".mobile-menu").click(expandMenu);
function expandMenu() {
$(".primary-nav").toggleClass("menu-expand");
$(this).toggleClass("menu-open menu-closed");
}
我一定遺漏了一些東西，或者我可能需要為反向影片添加新的關鍵幀，但這感覺好像沒有必要。
編輯：這里也是 html
HTML
<div class="mobile-menu menu-closed">
<div class="line"></div>
</div>
uj5u.com熱心網友回復：
以下是如何使用簡單的 prop 值更改并謹慎計時來做到這一點。我想它也可以使用@keyframe 影片來完成，但我發現它們更難以跟蹤/控制/同步，至少在這種情況下，考慮到它（基本上）是一個兩步影片。
顯示代碼片段
document.querySelector('.mobile-menu').addEventListener('click', ({
target
}) => {
target.closest('.mobile-menu').classList.toggle('menu-open');
}).mobile-menu {
--duration: 0.42s;
--size: 3rem;
--padding: 0.5rem;
--color: red;
--distance-timing: cubic-bezier(0.5, 0, 0.3, 1);
--rotation-timing: cubic-bezier(0.4, 0, 0.2, 1);
width: var(--size);
height: var(--size);
padding: var(--padding);
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.mobile-menu * {
box-sizing: border-box;
}
.mobile-menu>div {
border: 1px solid var(--color);
height: 0;
width: 100%;
position: relative;
transform-origin: 50% 50%;
transition:
top calc(0.6 * var(--duration)) var(--distance-timing) calc(0.4 * var(--duration)),
bottom calc(0.6 * var(--duration)) var(--distance-timing) calc(0.4 * var(--duration)),
transform calc(0.8 * var(--duration)) var(--rotation-timing) 0s;
}
.mobile-menu> :nth-child(1) {
top: calc(var(--padding)/2);
}
.mobile-menu> :nth-child(3) {
bottom: calc(var(--padding)/2);
}
.mobile-menu.menu-open>div {
transition:
top calc(0.4 * var(--duration)) var(--distance-timing) 0s,
bottom calc(0.4 * var(--duration)) var(--distance-timing) 0s,
transform calc(0.8 * var(--duration)) var(--rotation-timing) calc(0.2 * var(--duration));
}
.mobile-menu.menu-open> :nth-child(1) {
top: calc(50% - 1px);
transform: rotate(0.125turn);
}
.mobile-menu.menu-open> :nth-child(2) {
transform: rotate(0.125turn);
}
.mobile-menu.menu-open> :nth-child(3) {
bottom: calc(50% - 1px);
transform: rotate(-0.125turn);
}<div class="mobile-menu">
<div></div>
<div></div>
<div></div>
</div>同樣的事情，在 SCSS 中：https ://jsfiddle.net/websiter/dybre2f9/
我已經將值提取到 CSS 變數中，因此可以輕松地重用和修改它。隨意根據自己的喜好調整它。
注意：我使用bottom和top為運動設定影片的原因（而不是translateY- 這稍微提高了性能）是因為我希望這兩個影片彼此完全獨立，以允許我使用各種重疊值和時間進行播放職能。我想出的東西并沒有 100% 遵守要求（例如，它的旋轉與運動略微重疊 - 但我是故意這樣做的，因為它們不重疊看起來太機械了）。當重疊時，整個影片看起來更有機。這就像按鈕是活的，很高興被要求做影片。或者也許我只是有點瘋狂，我不知道......
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380890.html
標籤：javascript html 查询 css css动画