Motion 通用动效

Aurora Plus 按交互阶段提供统一反馈：按压快速响应，释放平滑恢复，进入略长于退出。动效保持原有组件尺寸，使用轻微缩放、位移、透明度和状态色变化。

交互反馈

按钮、链接、菜单项和窗口操作使用按压反馈；输入与选择器平滑切换悬停、编辑及选中状态。弹层共用进入和退出节奏，关闭中的浮层停止接收指针操作。

悬停提示3

选择内容当前开启

42

42%

点击或输入，观察状态反馈

悬停卡片可观察轻微抬升

内容一

内容二

内容三

<script setup>
import { onBeforeUnmount, ref } from 'vue';
import {
  AuBadge, AuButton, AuCard, AuCheckbox, AuCollapseItem, AuDialog,
  AuDrawer, AuInput, AuMessage, AuProgress, AuSegmented, AuSelect,
  AuSlider, AuSwitch, AuTag, AuTooltip, AuTransitionGroup,
} from 'aurora-plus';
const checked = ref(false);
const enabled = ref(true);
const text = ref('点击或输入，观察状态反馈');
const format = ref('text');
const view = ref('列表');
const percentage = ref(42);
const dialogVisible = ref(false);
const drawerVisible = ref(false);
const saving = ref(false);
const rows = ref([{ id: 1, label: '内容一' }, { id: 2, label: '内容二' }, { id: 3, label: '内容三' }]);
let timer;
function save() {
  if (saving.value) return;
  saving.value = true;
  timer = setTimeout(() => {
    saving.value = false;
    AuMessage.success('操作已完成');
  }, 700);
}
onBeforeUnmount(() => clearTimeout(timer));
</script>
<template>
  <div class="motion-feedback">
    <div class="motion-feedback__row">
      <AuButton type="primary" :loading="saving" @click="save">保存反馈</AuButton>
      <AuButton @click="dialogVisible = true">打开对话框</AuButton>
      <AuButton @click="drawerVisible = true">打开抽屉</AuButton>
      <AuButton disabled>禁用状态</AuButton>
      <AuTooltip content="浮层使用统一进入和退出节奏">
        <AuBadge :value="rows.length"><AuTag type="primary">悬停提示</AuTag></AuBadge>
      </AuTooltip>
    </div>
    <div class="motion-feedback__row">
      <AuCheckbox v-model="checked">选择内容</AuCheckbox>
      <AuSwitch v-model="enabled" />
      <span>当前{{ enabled ? '开启' : '关闭' }}</span>
      <button class="au-motion-control motion-feedback__native" type="button" @click="checked = !checked">通用 CSS 按压反馈</button>
    </div>
    <div class="motion-feedback__fields">
      <AuInput v-model="text" clearable placeholder="输入内容" />
      <AuSelect v-model="format">
        <option value="text">文本</option>
        <option value="image">图片</option>
        <option value="locked" disabled>不可选</option>
      </AuSelect>
    </div>
    <AuSlider v-model="percentage" show-value />
    <AuProgress :percentage="percentage" />
    <AuSegmented v-model="view" :items="['列表', '网格', '摘要']" fill />
    <AuCollapseItem title="展开内容" summary="高度过渡可以反向中断">
      <p>{{ text }}</p>
    </AuCollapseItem>
    <div class="motion-feedback__row">
      <AuButton size="small" @click="rows = [...rows].reverse()">调整顺序</AuButton>
      <span>悬停卡片可观察轻微抬升</span>
    </div>
    <AuTransitionGroup class="motion-feedback__list">
      <AuCard v-for="row in rows" :key="row.id" padding="compact" hoverable>{{ row.label }}</AuCard>
    </AuTransitionGroup>
    <AuDialog v-model="dialogVisible" title="内容确认" width="360px">
      <AuInput v-model="text" />
      <template #footer><AuButton @click="dialogVisible = false">关闭</AuButton></template>
    </AuDialog>
    <AuDrawer v-model="drawerVisible" title="内容详情" size="320px">
      <p>{{ text }}</p>
      <template #footer><AuButton @click="drawerVisible = false">关闭</AuButton></template>
    </AuDrawer>
  </div>
</template>
<style scoped>
.motion-feedback { display: grid; min-width: 0; width: 100%; gap: 14px; }
.motion-feedback__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--au-color-text-secondary); }
.motion-feedback__fields { display: grid; min-width: 0; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.motion-feedback__list { display: grid; gap: 6px; }
.motion-feedback__native { height: 28px; padding: 0 9px; border: 1px solid var(--au-material-border); border-radius: var(--au-radius-compact); color: var(--au-color-text-default); background: transparent; font: inherit; cursor: pointer; }
.motion-feedback__native:hover { color: var(--au-color-primary); border-color: var(--au-color-primary); }
.motion-feedback p { margin: 0; font-size: 13px; line-height: 1.5; }
@media (max-width: 440px) { .motion-feedback__fields { grid-template-columns: minmax(0, 1fr); } }
</style>

滑块拖动即时跟随指针，外部数值更新使用平滑过渡。表格与树的行通过悬停及选中色变化表达状态，虚拟滚动偏移保持即时更新。内容容器默认使用状态过渡，可交互卡片通过 hoverable 启用抬升。

通用 CSS 类

以下类可直接用于自定义元素，元素的尺寸、外观及事件由调用方定义。

类名	用途
au-motion-state	文字、背景、边框、阴影与透明度的状态过渡
au-motion-control	按压缩小与释放恢复；识别原生 disabled 及 is-disabled / is-loading / is-readonly 状态
au-motion-row	列表行的文字、背景、边框与透明度过渡
au-motion-lift	悬停轻微抬升、按压恢复原位置
au-motion-reveal	元素挂载时一次淡入
au-motion-pulse	操作进行中的轻微呼吸反馈
au-spin	持续旋转，适用于加载图标

au-motion-control 和 au-motion-lift 使用独立缩放或位移属性，保留元素自身的 transform 定位。已有透明度动画的元素不宜再叠加 au-motion-reveal 或 au-motion-pulse，可以给外层元素应用需要的反馈。

内容进入与退出

使用 Transition 为条件内容提供淡入、位移或缩放过渡。列表的直接子项提供稳定的 key 后，AuTransitionGroup 支持增删、依次进入和顺序调整。

时长与曲线

动效复用全局 --au-transition-duration 和 --au-transition-timing。默认基础时长为 200ms，状态过渡 200ms、按压 110ms、释放 320ms、进入 300ms、退出 160ms；修改基础时长后各阶段按比例调整。

:root {
  --au-transition-duration: 0.2s;
  --au-transition-timing: cubic-bezier(0.2, 0.8, 0.2, 1);
}

独立数字和进度组件可通过 animated 关闭对应动画；AuTransition 和 AuTransitionGroup 也支持 animated 与 duration。