vue.js css3动画不能执行

Question

由于项目需要，没有应用 vue 提供的 <transition 动画，
使用了 css3 的动画，但出现了再ios下动画能运行，但在Android机子下动画不能运行，
哪位童鞋遇到过呢，还望指点指点！！

.clAnim{
        -webkit-animation: cloud-lift-anim 8000ms ease-out forwards;
            animation: cloud-lift-anim 8000ms ease-out forwards;
    }
    @-webkit-keyframes cloud-lift-anim{

        25%{
            /*left: -65%;*/
            -webkit-transform:translate(-65%,0);
            transform:translate(-65%,0);
        }
        75% {
            /*left: -65%;*/
            -webkit-transform:translate(-65%,0);
            transform:translate(-65%,0);
        }
        100%{
            /*left: -100%;*/
            -webkit-transform:translate(-100%,0);
            transform:translate(-100%,0);
        }
    }
    @keyframes cloud-lift-anim{

        25%{
            /*left: -65%;*/
            -webkit-transform:translate(-65%,0);
            transform:translate(-65%,0);

        }
        75% {
            /*left: -65%;*/
            -webkit-transform:translate(-65%,0);
            transform:translate(-65%,0);

        }
        100%{
            /*left: -100%;*/
            -webkit-transform:translate(-100%,0);
            transform:translate(-100%,0);

        }
    }

Answer 1

问题解决了，其实在 vue-cli脚手架的 webpack.base.conf.js 配置文件里面就有对浏览器的版本做css的前缀处理 ‘gulp-autoprefixer’。
vue2 的默认配置是：

postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]

意思是 只兼容主流浏览器的最新两个版本。
改成

postcss: [
      require('autoprefixer')({
        browsers: ['last 5 versions', 'Android >= 4.0']
      })
    ]

就可以做其他版本的兼容了。

Answer 2

应该是安卓低版本系统的webview解析不了css的动画，我也遇到了，我是强行去掉了动画。

Answer 3

vue 更换了配置位置 在package.json中

vue-cli脚手架根据浏览器的版本对css做了前缀处理。你需要在默认的基础上加上
"Android >= 4.0",

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

希望可以帮到你！

Answer 4

试试增加下兼容性看看
animation -o-animation -moz-animation -webkit-animation