css过渡属性是否支持多种变换_通过多个transition属性控制不同变化

能，transition 属性可通过逗号分隔多组参数实现多个 css 属性各自独立过渡，如 transition: width 0.3s ease-in, opacity 0.2s linear 0.1s；未支持动画的属性（如 display、height:auto）不会触发过渡。

transition 属性能否同时控制多个 CSS 属性的过渡

能，但不是靠写多个 transition 声明来实现。CSS 规范只允许一个 transition 属性生效（后声明的会覆盖前声明的），所以直接写两行 transition: width 0.3s; 和 transition: opacity 0.2s;，后者会完全取代前者。

如何真正让 width、opacity、transform 等多个属性各自按不同时间/缓动过渡

用逗号分隔的多组过渡描述符，写在单个 transition 声明里即可。每组包含「属性名、持续时间、timing-function、延迟」四个可选部分，缺省值会自动补上。

常见写法示例：

transition: width 0.3s ease-in, opacity 0.2s linear 0.1s, transform 0.35s cubic-bezier(0.2, 0.8, 0.4, 1);

• 每组之间用英文逗号分隔，不能漏掉
• 属性名必须拼写准确（如 background-color 不能简写为 background）
• 未指定的参数按默认值处理：timing-function 是 ease，delay 是 0s
• 如果某属性想禁用过渡，得显式写成 transition-Property: none，不能留空或写 auto

transition-property 设为 all 时为什么有些变化没过渡效果

因为不是所有 CSS 属性都支持过渡。浏览器只对“可动画化”（animatable）的属性做插值计算，比如 color、left、transform 可以，但 display、height（当值为 auto 时）、font-family 就不行。

立即学习“前端免费学习笔记（深入）”；

• transition: all 0.3s; 看似方便，实则容易掩盖问题——比如 display: none → block 会直接跳变，毫无过渡
• height 设为 auto 时无法过渡，得改用 max-height 配合足够大的值来模拟
• 用 transform 替代 top/left 做位移，性能更好，且保证可过渡

transitionend 事件怎么判断是哪个属性触发的

事件对象的 propertyName 属性会返回实际完成过渡的 CSS 属性名（不含 vendor prefix），可用于区分逻辑分支。

示例：

elem.addEventListener('transitionend', (e) => {   if (e.propertyName === 'opacity') {     console.log('透明度过渡结束');   } else if (e.propertyName === 'transform') {     console.log('变换结束');   } });

• 注意：如果多个属性过渡时间相同，transitionend 可能连续触发多次，不要假设只来一次
• transitionend 不会在 transition: none 或过渡被取消（如 class 被快速切走）时触发
• 移动端需留意 safari 对 transitionend 的兼容性，某些老版本可能不触发伪元素的该事件

过渡链路越长、属性越多，越容易因某个属性不可动画或单位不匹配（比如 px 和 rem 混用）导致整条链静默失效。调试时优先检查 computed style 中目标属性是否真在变，再看 transition 声明是否被覆盖或语法出错。