Javascript 为什么文本是；“跳跃”；当包含它的元素使用CSS设置动画时？

const dropdown=document.getElementById（'dropdown'））
设isDropdownActive=false
函数toggleDropdown（）{
如果（！isDropdownActive）{
isDropdownActive=true
dropdown.style.display=“块”
下拉列表.classList.add（'animate'，'animate scale in'）
}否则{
dropdown.style.display=“无”
isDropdownActive=false
}
}

html{
字体大小：14px；
}
.绝对的{
位置：绝对位置；
}
.制作动画{
动画填充模式：两者都有；
动画持续时间：0.4s；
}
.在中设置缩放动画{
动画名称：animScaleIn；
}
@关键帧animScaleIn{
从{
变换：比例（0）；
}
到{
变换：比例（1）；
}
}

开放式下拉列表


项目

恐怕您的设计已经走到了尽头——实际上，Web浏览器不能保证您的像素级渲染。理论上，可能是这样的，因为在任何规范中都没有规定必须为给定的字体大小规则或填充数字生成不同的字形大小

然而，在实践中，Web浏览器已经、现在和将来都会根据自己的判断来呈现您的超文本，其准确性可能会略有不同，因为您无法直接（如果有的话）控制许多变量

例如，在Windows10上的MyFirefox87上测试您的代码时，没有任何“Jankines”

您需要接受“Jankines”，或者修改您的设计，使问题自行消失，或者使用不同的UI解决方案来实现您的目标

---

您可以查看HTML元素，看看它是否可以帮助您解决问题，而无需编写所有脚本。

恐怕您的设计已经走到了尽头——实际上，Web浏览器并不能保证您的像素完美渲染。理论上，可能是这样的，因为在任何规范中都没有规定必须为给定的字体大小规则或填充数字生成不同的字形大小

然而，在实践中，Web浏览器已经、现在和将来都会根据自己的判断来呈现您的超文本，其准确性可能会略有不同，因为您无法直接（如果有的话）控制许多变量

例如，在Windows10上的MyFirefox87上测试您的代码时，没有任何“Jankines”

您需要接受“Jankines”，或者修改您的设计，使问题自行消失，或者使用不同的UI解决方案来实现您的目标

您可以查看HTML元素，看看它是否可以帮助您解决问题，而无需编写所有脚本。

该“凹凸”与元素精确地达到scale=1一致，这使我认为这与Chromium如何优化未缩放元素的渲染有关

将目标比例设置为略小于1（以防止优化）有助于：

const dropdown=document.getElementById（'dropdown'））
设isDropdownActive=false
函数toggleDropdown（）{
如果（！isDropdownActive）{
isDropdownActive=true
dropdown.style.display=“块”
下拉列表.classList.add（'animate'，'animate scale in'）
}否则{
dropdown.style.display=“无”
isDropdownActive=false
}
}

html{
字体大小：14px；
}
.绝对的{
位置：绝对位置；
}
.制作动画{
动画填充模式：两者都有；
动画持续时间：0.4s；
}
.在中设置缩放动画{
动画名称：animScaleIn；
}
@关键帧animScaleIn{
从{
变换：比例（0）；
}
到{
变换：比例（0.999999）；
}
}

开放式下拉列表


项目

凹凸与元素精确命中比例=1一致，这让我认为这与Chromium如何优化未缩放元素的渲染有关

将目标比例设置为略小于1（以防止优化）有助于：

const dropdown=document.getElementById（'dropdown'））
设isDropdownActive=false
函数toggleDropdown（）{
如果（！isDropdownActive）{
isDropdownActive=true
dropdown.style.display=“块”
下拉列表.classList.add（'animate'，'animate scale in'）
}否则{
dropdown.style.display=“无”
isDropdownActive=false
}
}

html{
字体大小：14px；
}
.绝对的{
位置：绝对位置；
}
.制作动画{
动画填充模式：两者都有；
动画持续时间：0.4s；
}
.在中设置缩放动画{
动画名称：animScaleIn；
}
@关键帧animScaleIn{
从{
变换：比例（0）；
}
到{
变换：比例（0.999999）；
}
}

开放式下拉列表


项目

由于正在使用，因此需要添加x轴和y轴

  Position: absolute;
  top: 100%;
  left: 0;

以下是演示：

const dropdown=document.getElementById（'dropdown'））
函数toggleDropdown（）{
如果（！dropdown.classList.contains（'animate'））{
下拉列表.classList.add（'animate'）
}否则{
下拉列表.classList.remove（'animate'）；
}
}

*{
框四宗：边框框；
填充：0；
保证金：0；
}
html{
字体大小：14px；
填充：20px；
}
[id=下拉列表]{
位置：绝对位置；
最高：100%；
左：0；
背景色：红色；
变换：比例（0）；
变换样式：保留-3d；
改变：转变；
}
绝对