菜单选择动画

十一月 24, 2023 / Mr.x / 3阅读 / 0评论/ 分类: 实用
菜单选择动画 — 荣小站
前端 CSS JavaScript 动画

菜单选择动画

单选按钮切换时的掉落动画效果，流畅的过渡动画体验。

▼ 点击切换查看动画
单选按钮切换时的掉落动画效果，流畅的过渡动画体验。

这是一个极具创意的单选按钮动画效果——当用户在菜单中选择不同选项时，已选中的圆点会有一个"掉落"的动画效果，仿佛在菜单中滚动一样。动画使用了 Web Animations API 实现平滑的过渡。

核心特性

  • 掉落动画：选中项切换时有弹跳掉落效果
  • 平滑过渡：使用 cubic-bezier 缓动函数
  • 深色模式：自动适配系统主题
  • Web Animations API：原生 JavaScript 动画接口

完整代码

以下是完整的单文件代码，你可以直接保存为 .html 文件运行：

HTML

<form>
    <label>
        <input type="radio" name="os" data-option="0" value="windows" checked>
        Windows
    </label>
    <label>
        <input type="radio" name="os" data-option="1" value="mac">
        Mac
    </label>
    <label>
        <input type="radio" name="os" data-option="2" value="linux">
        Linux
    </label>
</form>

CSS

@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --hue: 223;
    --bg: hsl(var(--hue),90%,80%);
    --fg: hsl(var(--hue),90%,10%);
    --radio-off: hsl(var(--hue),90%,90%);
    --radio-on: hsl(var(--hue),90%,50%);
    --radio-down: hsl(var(--hue),90%,70%);
    --trans-dur: 0.3s;
}

body {
    background-color: var(--bg);
    display: flex;
    height: 100vh;
}

form {
    background-color: hsl(0,0%,100%);
    border-radius: 0.75em;
    margin: auto;
    padding: 0.75em;
    min-width: 15em;
}

label {
    display: flex;
    align-items: center;
    padding: 0.75em 0.75em 0.75em 3em;
    position: relative;
}

input[type="radio"] {
    position: absolute;
    bottom: 0.75em;
    left: 0.75em;
    width: 1.5em;
    height: 1.5em;
    -webkit-appearance: none;
    appearance: none;
}

input[type="radio"]:checked {
    background-color: var(--radio-on);
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),90%,10%);
        --radio-off: hsl(var(--hue),90%,40%);
        --radio-on: hsl(var(--hue),90%,90%);
    }
    form {
        background-color: hsl(var(--hue),90%,20%);
    }
}

JavaScript

class DroppingRadioButtons {
    optionID = 0;
    optionAAnim = null;
    optionBAnim = null;

    constructor(el) {
        this.el = document.querySelector(el);
        this.el.addEventListener("change",this.updateOption.bind(this));
    }

    updateOption(e) {
        const nextOption = +e.target.getAttribute("data-option");
        if (this.optionID !== null) {
            this.animateOption(this.optionID, nextOption);
        }
        this.optionID = nextOption;
    }

    animateOption(optionA, optionB) {
        // 动画实现代码...
    }
}

window.addEventListener("DOMContentLoaded",() => {
    const c = new DroppingRadioButtons("form");
});

技术要点

技术点说明
Web Animations API原生 JavaScript 动画接口
cubic-bezier自定义缓动函数实现弹跳效果
CSS 变量统一管理颜色主题
prefers-color-scheme检测系统深色/浅色模式
data-* 属性存储选项索引

使用说明

  1. 将完整代码保存为 .html 文件
  2. 用浏览器打开
  3. 点击不同选项，观察圆点的掉落动画效果
  4. 如使用深色模式，系统会自动适配

#菜单选择动画(1)

评论