postcss-animation插件发布

[zhouwenbin]

简介

postcss-animation用来帮我们添加动画的关键帧，数据来自animate.css，会按需要生成相应的关键帧，不用导入一大坨样式。

用法

npm install postcss-animation --save-dev

配置

postcss

新建一个postcss.js文件，代码如下

// Dependencies
var fs = require('fs');
var postcss = require('postcss');
var animation = require('postcss-animation');

// CSS to be processed
var css = fs.readFileSync('input.css', 'utf8');

var output = postcss()
  .use(animation())
  .process(css)
  .css

console.log('\n===>Output CSS:\n', output);

在命令行输入node postcss.js执行

grunt

在根目录新建gruntfile.js，代码如下

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    postcss: {
      options: {
        processors: [
          require('postcss-animation')(),
          require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss
        ]
      },
      dist: {
        src: ['src/*.css'],
        dest: 'build/grunt.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);
}

在命令行输入grunt postcss

gulp

在根目录新建gulpfile.js，代码如下

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var animation = require('postcss-animation')
var autoprefixer = require('autoprefixer-core')

gulp.task('default', function () {
    var processors = [
        animation(),
        autoprefixer({ browsers: ['> 0%'] })

    ];
    gulp.src('src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);

在命令行输入gulp

实例

/*input.css*/
.foo {
  animation-name: bounce;
}

/*output.css*/
.foo {
  animation-name: bounce;
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}

测试用例

test里面是所有的测试用例

$ git clone https://github.com/zhouenbin/postcss-animation.git
$ cd postcss-animation
$ npm install
$ npm test

[yisibl]

我觉得不应该单独把 animate.css 内容放到 JS 文件中，应该直接读取这个 CSS。

[zhouwenbin]

@yisibl 直接读css也可以，第一次写插件，api还不熟悉

[yisibl]

直接读取，方便修改及维护。

还是很赞的，你去官方仓库提交一个 PR，加入到插件列表中。

[zhouwenbin]

@yisibl 已经提交了，参考了很多插件，照猫画虎弄了一个，还是要多练练手。

[shikelong]

请问atom的cssnext的插件为什么删除了啊。 谢谢。

[zhouwenbin]

@shikelong 编译出了问题