Angular 6部署后LESS动画失效问题求助

早上好！这种本地正常但生产打包后动画失效的问题确实挺让人头疼的，我帮你梳理几个大概率的原因和对应的解决办法：

1. 先排查Angular生产打包的CSS优化是否误删了keyframes #

Angular的--prod模式默认会开启CSS的压缩、精简和未使用代码清除（purge），很可能把你自定义的rollimg、scrollup这类keyframes当成“未被引用的冗余代码”删掉了，或者对名称做了混淆处理。

解决思路：

• 先临时关闭CSS的purge功能测试效果，在angular.json的build -> options里添加优化配置：

  "optimization": {
    "styles": {
      "minify": true,
      "inlineCritical": true,
      "purge": false
    }
  }
  

• 如果关闭后动画正常了，说明是purge规则的问题，你可以进一步细化purge的include规则，明确指定要保留的动画名称，或者确保组件中确实有元素在使用这些动画对应的类。

2. 检查LESS keyframes混合宏的编译正确性 #

你的混合宏写法有个小细节可能出问题：第二个混合宏调用时.keyframes (scrollup, {...})多了个空格，这可能导致LESS编译异常，生成的keyframes不完整。

另外，建议确保混合宏生成了浏览器前缀（比如webkit），适配不同生产环境的浏览器：

.keyframes(@name, @frames) {
  @-webkit-keyframes @name { @frames(); }
  @keyframes @name { @frames(); }
}

调用时注意不要有多余空格：.keyframes(scrollup, {...})

3. 确认动画类的引用没有被组件视图封装隔离 #

如果这些动画是在组件内部使用，要确保对应的类没有被Angular的视图封装机制隔离。你可以：

• 把动画相关的样式放在全局的styles.less里（你已经配置了全局引入，这个没问题）
• 或者在组件样式中用:host ::ng-deep来强制穿透封装，确保动画类能作用到目标元素。

4. 直接检查生产打包后的CSS文件 #

运行ng build --prod后，去dist/website目录下找到编译后的CSS文件（一般是styles.*.css），搜索rollimg、scrollup这两个关键词：

• 如果搜不到，说明keyframes被优化删掉了，回到第一步调整配置
• 如果搜到但名称被改成了类似a、b的短名称，那是混淆导致的，需要在Angular优化配置中禁用keyframes的名称混淆。

内容的提问来源于stack exchange，提问作者Paweł Skrzeszewski