在这个页面看到的css变量支持情况,以为是完全支持,但并不是。
https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/wxss.html
建议如果想支持某个能力就全量支持,不全量支持就写清楚,这样对于开发迁移会容易点。
// 变量定义
page
{
--xxx-transition-curve-1: cubic-bezier(0.42, 0, 0.58, 1);
--xxx-transition-time-1: 150ms;
}
如果引用变量时,css属性每个是分开写是正常工作的。
// 正常工作
transition-property: all;
transition-duration: var(--xxx-transition-time-1);
transition-timing-function: var(--xxx-transition-curve-1);
如果相关属性简写,是无法工作的
// 无法工作
transition: all var(--xxx-transition-time-1) var(--xxx-transition-curve-1);
排查了一下是 wxss 解析的 bug,下个客户端版本会修复。