list-style 相关属性不可动画，需用伪元素模拟：移除默认标记，通过 ::before 设置 content、opacity、transform 等可过渡属性实现动画效果。
list-style 本身不支持 CSS transition
直接对 list-style-type 或 list-style-image 添加 transition 不会生效，因为这些属性不是可动画的 CSS 属性（CSS Transitions Level 1 规范中未列入动画列表）。浏览器会静默忽略过渡声明，不会报错，但你完全看不到变化过程。
用伪元素 + opacity/transform 模拟可过渡的列表标记
真正可行的方案是剥离默认标记，改用 ::before 伪元素生成自定义符号，并对其 opacity、transform、color 等支持过渡的属性做动画：
.custom-list li {
list-style: none;
position: relative;
padding-left: 2em;
}
.custom-list li::before {
content: "•";
position: absolute;
left: 0;
opacity: 0.6;
transition: opacity 0.3s ease, transform 0.2s ease;
}
.custom-list li:hover::before {
opacity: 1;
transform: scale(1.2);
}
常见可过渡替代项包括：content 不能动，但可通过切换 class 控制不同 ::before 的显隐；color 可用于图标字体（如 Font Awesome）；background-image 配合 background-position 能实现 sprite 动画效果。
使用 SVG 图标时注意 fill 和 stroke 的过渡兼容性
若用内联 SVG 作为列表标记（比如嵌在 ::before 的 content 不适用，需改用 background-image: url("data:image/svg...") 或实际插入 <svg></svg>），关键点在于：
立即学习“前端免费学习笔记（深入）”；
-
fill和stroke在所有现代浏览器中都支持transition - 避免用
url(#id)引用外部<defs></defs>，会导致过渡失效 - SVG 必须内联或 base64 编码，否则无法对内部属性做 CSS 控制
例如：
.icon-list li::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 14.2l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
transition: background 0.3s ease;
}
.icon-list li:hover::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23007bff' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 14.2l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
}
JavaScript 辅助切换时别忘了触发重排
如果通过 JS 动态切换类名来控制样式（比如点击展开后改变标记），而过渡没触发，大概率是因为浏览器把“移除旧类”和“添加新类”合并到了一次渲染中。解决方法是强制重排：
el.classList.remove("state-a");
// 强制 reflow
void el.offsetWidth;
el.classList.add("state-b");
或者更稳妥地用 getComputedStyle 读取任意属性（如 height）来触发同步布局计算。
最易被忽略的是：过渡依赖于“两个不同状态之间的数值变化”，如果起始或结束状态没有明确声明（比如只在 hover 里写 transform，但默认状态没设 transform: none），动画可能不启动或表现异常。
