first-commit

Author: vace

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.pem
+app/
+*.crx
+*.zip

README.md

@@ -0,0 +1,32 @@
+# Chrome Plugin Css3 Animation
+
+快速给页面加上炫酷css3动画的chrome插件。
+
+## 使用
+### 1.从chrome webstore下载
+[chrome应用商店安装地址https://chrome.google.com/webstore/detail/lhbbbidpkalopmenjffckblgbdhcffpa](https://chrome.google.com/webstore/detail/lhbbbidpkalopmenjffckblgbdhcffpa)
+
+### 2.直接下载crx文件
+[下载地址]()
+
+### 3.自行构建
+- `npm install -g vue-cli`
+- `git clone https://github.com/vace/css3-animation-generator`
+- `cd css3-animation-generator && npm install`
+- `npm run app`
+
+
+## 样式导出规则：
+1. 优先使用带有 `c3`前缀的class，如 `<span class="c3-test">animate it</span>`
+2. 如果存在class，则使用class选择器，如 `<span class="fl animate">animate it</span>`
+3. 如果定义了Id，则使用id选择器，如 `<span id="anim1">animate it</span>`
+4. 如果都不存在，则使用内部自定义的选择器查找方案
+
+
+## Remark
+
+- [animate.css](https://github.com]daneden/animate.css)
+- [magic.css](https://github.com/miniMAC/magic)
+- [iview](https://github.com/iview/iview)
+- [vue](https://github.com/vuejs/vue)
+- [chrome developer](https://developer.chrome.com/extensions)

gen/animate-css-gen.js

@@ -0,0 +1,39 @@
+const fs = require('fs')
+
+const utils = require('./utils')
+const library = require('./library')('Animate',{
+  desc:'A cross-browser library of CSS animations. As easy to use as an easy thing.',
+  version:'3.5.2',
+  creator:'Daniel Eden',
+  license:'MIT',
+  git:'https://github.com/daneden/animate.css',
+  demo:'https://daneden.github.io/animate.css/'
+})
+
+const css = fs.readFileSync(__dirname + '/css/animate.css','utf-8')
+
+const GroupKey = [
+  'bounce','bounceIn','fadeIn','flip','lightSpeed','rotateIn','hinge','zoomIn','slideInDown'
+]
+const GroupString = [
+  'Attention','Bouncing','Fading','Flippers','Lightspeed','Rotating','Specials','Zoom','Sliding'
+]
+
+let GroupIndex = 0
+
+let Results = utils.genKeyframes(css)
+
+Results.map(({name,keyframe}) => {
+  var idx = GroupKey.indexOf(name)
+  if(idx !== -1){
+    GroupIndex = idx
+  }
+  library.add({
+    group:GroupString[GroupIndex],
+    name,
+    keyframe,
+    tags:utils.hyphenate(name).split('-')
+  })
+})
+
+library.export()

gen/css-gen.js

@@ -0,0 +1,3 @@
+require('./animate-css-gen')
+require('./magic-css-gen')
+require('./other-css-gen')