使用anime.js实现菜单动画时出现CSS宽/高解析错误求助

我要制作一个位于角落的半圆菜单按钮，用anime.js执行反向动画（切换菜单显示/隐藏状态）时，出现了约30条CSS报错，提示「解析width/height值错误，声明已丢弃」。试过重写全部代码、把动画中的宽高值从字符串改为数字、调整CSS及动画的宽高数值，甚至用CSS校验工具，问题仍未解决。

我的代码 #

HTML #

<ul>
<a href="#"><li>home</li></a>
<a href="#"><li>about us</li></a>
<a href="#"><li>projects</li></a>
<a href="#"><li>products</li></a>
<a href="#"><li>e-catalog</li></a>
<a href="#"><li>contact us</li></a>
</ul>

CSS #

.nav-list-round{
width: 400px;
height: 400px;
background-color: antiquewhite;
border-radius: 50%;
flex-direction: column;
list-style: none;
position: absolute;
top: -200px;
right: -200px;
}
.nav-item-round{
position: absolute;
top: 200px;
right: 200px;

}
.link-round{
color: rgb(2, 56, 56);
text-decoration: none;
font-size: 20px;

}

JavaScript #

import anime from "animejs";

let menuState = false;

menu.addEventListener('click',()=>{
menuState = !menuState;

    if(menuState){
        anime({
            targets: '.nav-list-round',
            width: '400px',
            height: '400px',
            duration: 3000
        })
    }
    else if(!menuState){
        anime({
            targets: '.nav-list-round',
            width: '0px',
            height: '0px',
            duration: 3000
        })
    }

})

1. 强制动画数值取整（核心修复） #

anime.js在动画过程中会生成带多位小数的宽高值，导致CSS解析失败。给动画配置加上round: 1，强制数值取整为整数像素：

import anime from "animejs";

let menuState = false;

menu.addEventListener('click',()=>{
menuState = !menuState;

    if(menuState){
        anime({
            targets: '.nav-list-round',
            width: 400, // 直接用数字，框架自动补px
            height: 400,
            duration: 3000,
            round: 1 // 关键：避免生成无效小数
        })
    }
    else {
        anime({
            targets: '.nav-list-round',
            width: 0,
            height: 0,
            duration: 3000,
            round: 1
        })
    }

})

2. 修正CSS初始状态与布局 #

• 默认隐藏时设宽高为0，避免初始状态冲突
• 补上display: flex让flex-direction生效
• 加overflow: hidden防止菜单内容溢出

.nav-list-round{
    width: 0; /* 默认隐藏 */
    height: 0;
    background-color: antiquewhite;
    border-radius: 50%;
    display: flex; /* 缺失的flex布局声明 */
    flex-direction: column;
    list-style: none;
    position: absolute;
    top: -200px;
    right: -200px;
    overflow: hidden; /* 防止内容溢出半圆 */
}
.nav-item-round{
    position: absolute;
    top: 200px;
    right: 200px;
}
.link-round{
    color: rgb(2, 56, 56);
    text-decoration: none;
    font-size: 20px;
}

3. 修复无效HTML结构 #

a标签不能直接包裹li，这是违反HTML规范的，改成li包裹a：

<ul class="nav-list-round">
    <li class="nav-item-round"><a href="#" class="link-round">home</a></li>
    <li class="nav-item-round"><a href="#" class="link-round">about us</a></li>
    <li class="nav-item-round"><a href="#" class="link-round">projects</a></li>
    <li class="nav-item-round"><a href="#" class="link-round">products</a></li>
    <li class="nav-item-round"><a href="#" class="link-round">e-catalog</a></li>
    <li class="nav-item-round"><a href="#" class="link-round">contact us</a></li>
</ul>

效果说明 #

以上修改解决了动画过程中生成无效宽高值的问题，同时修正了HTML/CSS的潜在错误，菜单的显隐动画不会再触发CSS解析报错，且布局逻辑更规范。

内容的提问来源于stack exchange，提问作者kerim