vue2.0项目CSS3动画打包后动画失效解决

vue2.0 + webpack做项目时,css3动画打包前正常,打包后失效,原因是:
vue-cli脚手架package.json配置文件里面对浏览器的版本做了css的前缀处理

vue-20.png

"browserslist": [    
    "> 1%",    
    "last 2 versions",    
    "not ie <= 8"  
]

意思是 只兼容主流浏览器的最新两个版本。如果我们要兼容所有的就必须把这改成下面,就可以了。

"browserslist": [    
    "> 1%",    
    "last 5 versions",   
     "Android >= 4.0",    
     "not ie <= 8"  
 ]

CSS部分我们也需要做好兼容写法,优雅降级和渐进增强都可以。

 .hello_world{        
     -webkit-animation: say 12s linear infinite;        
     -moz-animation: say 12s linear infinite;        
     -ms-animation: say 12s linear infinite;        
     -o-animation: say 12s linear infinite;        
     animation: say 12s linear infinite;    
 }            
 @-webkit-keyframes say {        
     0% {}        
     100% {            
         -webkit-transform: rotateZ(360deg);       
     }    
 }        
 @-moz-keyframes say {        
     0% {}        
     100% {            
         -moz-transform: rotateZ(360deg);        
     }    
 }        
 @-ms-keyframes say {        
     0% {}        
     100% {            
         -ms-transform: rotateZ(360deg);        
     }    
 }        
 @-o-transforms say {        
     0% {}        
     100% {            
         -o-transform: rotateZ(360deg);        
     }    
 }        
 @keyframes say {        
     0% {}        
     100% {            
         transform: rotateZ(360deg);        
     }    
 }

链接:https://www.jianshu.com/p/3e9f0bee74c8

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值