如何检测不支持动画的浏览器禁用动画及修复文本无间距问题

问题1：不支持动画的浏览器自动禁用动画，仅展示纯文本 #

你可以选择两种方案实现，无需额外引入依赖：

• 纯CSS方案
  你原有代码中把@keyframes放在@supports查询内的思路是可行的，只需要把检测规则改成判断浏览器是否支持CSS动画属性即可，不支持的浏览器会自动忽略所有动画相关规则，文本会正常渲染：

/* 把原有的@supports块替换为下面的代码 */
@supports (animation-name: test) {
  .char {
    animation: an 1s ease-out 1 both;
  }
  @keyframes an {
    from {
      opacity: 0;
      transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
    }
    to {
      opacity: 1;
      transform: perspective(500px) translate3d(0, 0, 0);
    }
  }
}

• JS检测方案（适合需要在不支持动画的浏览器中减少冗余DOM节点的场景）
  在执行拆分字符加动画的逻辑前，先检测动画支持性，不支持就直接跳过字符拆分逻辑：

// 在unsecure函数开头新增这段检测代码
const isAnimSupported = CSS.supports('animation', '1s');
if (!isAnimSupported) return;

问题2：单词之间无间距修复 #

这个问题的根源是你给.char设置了display: inline-block，包裹在inline-block元素内的普通空格会被浏览器默认折叠，导致看不到间距，两种修复方案任选即可：

• 方案1：CSS新增空格保留规则
  给.char类加white-space: pre属性，强制保留元素内的空格：

.char {
  font-size: 40px;
  height: 40px;
  /* 新增下面这行 */
  white-space: pre;
  display: inline-block;
}

• 方案2：JS生成DOM时替换空格为不换行空格
  修改生成span的逻辑，把普通空格替换为不会被折叠的不换行空格：

// 把myFunc里的循环替换为下面的代码
for (let i = 0; i < text.innerText.length; i++) {
  const char = text.innerText[i] == ' ' ? '&nbsp;' : text.innerText[i];
  newDom += `<span class="char">${char}</span>`;
}

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