vue.js css3动画不能执行

问题描述

问 题

由于项目需要，没有应用 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);

        }
    }

解决方案

问题解决了，其实在 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']
      })
    ]

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

这篇关于vue.js css3动画不能执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！