为什么textillate.js仅简单滑入效果可用，其他动画全部无法正常运行？

问题根源 #

你当前引入的animate.css v4.1.1和textillate.js v0.4.0版本不兼容：

• textillate.js默认适配animate.css 3.x版本，动画类名格式为animated fadeInRight
• animate.css 4.x版本调整了类名规则，需要统一加animate__前缀，格式为animate__animated animate__fadeInRight
  类名不匹配导致大部分动画无法触发，仅部分默认兼容的基础效果能运行。

解决方案 #

方案1（推荐，无需修改业务代码） #

直接替换animate.css的CDN为3.x稳定版本即可，将你头部的animate.css引入标签替换为以下内容：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

替换后无需修改其他JS代码，所有动画即可正常生效。

方案2（保留animate.css 4.x版本） #

如果你需要继续使用4.x版本的animate.css，需要在所有textillate初始化配置中添加类名适配参数，示例如下：

myName.textillate({
    // 新增适配animate.css 4.x的类名配置
    css: {
        baseClass: 'animate__animated',
        animateClass: 'animate__'
    },
    in: { effect: 'fadeInRight' },
    loop: true,
    out: { effect: 'hinge' },
    delayScale: 1,
    delay: 150,
});

foot.textillate({
    // 同样新增适配配置
    css: {
        baseClass: 'animate__animated',
        animateClass: 'animate__'
    },
    in: { effect: 'fadeInRight' }, 
    loop: true,
    out: { effect: 'rollOut' },
    delayScale: 1,
    delay: 150,
});

调整后所有动画即可正常触发。

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