如何在Less中为不同的CSS状态定义转换动画_封装Transition通用函数-css教程-PHP中文网

应使用带参数的.transition(@prop, @time, @ease)混入封装，显式声明过渡属性、时长与缓动函数，避免all宽泛写法；需在:hover等状态选择器中显式调用，不可依赖继承，并优先使用transform/opacity保障性能。

如何在less中为不同的css状态定义转换动画_封装transition通用函数

Less里怎么写可复用的transition混入（mixin）

直接给结论：用带参数的.transition()混入，而不是重复写transition: all 0.3s ease这种硬编码。关键在于把属性、时长、缓动、延迟拆成参数，同时支持单属性和多属性写法。

常见错误是只传一个duration，结果:hover里改了color，但transform没进过渡队列——因为transition: color 0.3s默认不包含其他属性。

@property设为all或具体属性名（如background-color），避免漏掉目标变化项
@duration建议用变量统一管理（如@base-duration: 0.25s），别在每个调用处手写0.3s
缓动函数优先用cubic-bezier(0.4, 0, 0.2, 1)（即ease-in-out的现代等效），比ease更可控

如何让:hover / :focus等状态自动继承transition规则

Less本身不识别伪类状态，所以不能靠“自动继承”，必须显式在状态选择器里调用混入。容易忽略的是：父元素设了.transition()，子元素状态却没重写，动画就失效。

正确做法是把混入放在基础样式块里，再在状态块中再次调用——不是为了覆盖，而是确保该状态下也启用过渡。

.btn {
  .transition(background-color, 0.2s);
  background-color: #007bff;
  
  &:hover {
    .transition(background-color, 0.2s); // 必须重写，否则无动画
    background-color: #0056b3;
  }
}

别省略状态块里的.transition()调用，CSS不会向上继承transition声明
如果多个状态共用同一组过渡参数，可提取变量（如@btn-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)），再用transition: @btn-transition
注意:focus和:active需单独处理，它们的触发时机和用户交互路径不同