不能。CSS transition 不支持 grid-template-columns 等离散值属性的渐变过渡，浏览器无法插值计算中间状态；应改用 transform 和 opacity 对列容器做入场/退场动效，或采用 Flex 布局配合 flex-basis 与 max-width 实现平滑切换。
transition 能不能直接作用于 grid-template-columns
不能。CSS transition 不支持 grid-template-columns 这类离散值属性的渐变过渡——浏览器无法插值计算 1fr 1fr 到 1fr 的中间状态，会直接跳变。
用 transform + opacity 模拟列切换动效
真正可动画的属性是 transform 和 opacity，适合对列容器做“入场/退场”式过渡。关键是把两列包装进独立 wrapper，再控制其位移与透明度：
- 给每列加
class="col"，设初始transform: translateX(0); opacity: 1; - 移动端媒体查询中，让第二列向右平移并淡出：
@media (max-width: 768px) { .col:nth-child(2) { transform: translateX(100%); opacity: 0; } } - 在 wrapper 上统一加
transition: transform 0.3s ease, opacity 0.3s ease;
注意：必须确保 wrapper 容器有明确高度（如 min-height: 100vh），否则第二列移出后父容器可能塌缩，导致第一列上跳。
Flex 布局下更稳妥的动效写法
Flex 对 flex-basis 和 flex-grow 的过渡支持比 Grid 更可靠，尤其配合 max-width：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 桌面端设
.col { flex: 1; max-width: 50%; } - 移动端改
.col { flex: 1 1 100%; max-width: 100%; transition: flex-basis 0.3s ease, max-width 0.3s ease; } - 避免只写
width—— 它不参与 Flex 计算，且无法过渡
实际效果是两列宽度从 50% 平滑拉伸到 100%，视觉上就是“合并为一列”的过程。
容易被忽略的 timing-function 和触发时机
动效卡顿或突兀，往往不是没加 transition，而是 timing-function 和触发条件没对齐：
- 别用
ease-in或ease-out做布局切换——开头/结尾太慢，用户感知延迟；ease或cubic-bezier(0.33, 0.66, 0.66, 1)更自然 - 媒体查询断点要和 JS 切换逻辑一致：如果用 JS 动态加 class 控制布局，
transition必须写在 class 规则里，而不是媒体查询内部 - 移动端 Safari 对
transform: scale()的过渡渲染更稳定，必要时可用scale(1) → scale(0.98)配合opacity模拟收缩感
