Brand-New World

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015"]
+  "presets": ["es2015"],
+  "plugins": ["transform-es2015-literals"]
 }

gulpfile.babel.js

@@ -8,6 +8,7 @@ import del from 'del';
 import usemin from 'gulp-usemin';
 import uglify from 'gulp-uglify';
 import htmlminify from 'gulp-html-minify';
+import 'babel-polyfill';
 
 
 let base={
@@ -42,7 +43,10 @@ gulp.task('dev-styles',()=>{
 gulp.task('dev-scripts',()=>{
     return gulp.src(scriptBase.src)
         .pipe(plumber())
-        .pipe(babel())
+        .pipe(babel({
+            presets: ['es2015'],
+            plugins: ["babel-polyfill"]
+        }))
         .pipe(gulp.dest(scriptBase.devDest))
         .pipe(connect.reload());
 

package.json

@@ -14,6 +14,11 @@
   "license": "MIT",
   "devDependencies": {
     "babel-core": "^6.5.2",
+    "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
+    "babel-plugin-transform-es2015-for-of": "^6.5.2",
+    "babel-plugin-transform-es2015-literals": "^6.3.13",
+    "babel-plugin-transform-es2015-typeof-symbol": "^6.4.3",
+    "babel-polyfill": "^6.5.0",
     "babel-preset-es2015": "^6.5.0",
     "del": "^2.2.0",
     "gulp": "^3.9.1",

src/index.html

@@ -196,6 +196,7 @@ <h2>遇见 就是幸运</h2>
 </div>
 
 <!-- build:es6 js.js -->
+<script type="text/javascript" src="js/polyfill.js"></script>
 <script type="text/javascript" src="js/js.js"></script>
 <!-- endbuild -->
 	<script>

src/js/js.js

@@ -30,23 +30,51 @@ class Misaka{
 
         };
         this[0]=makeIterator(ele);
+
+
+
+    }
+
+    getAnimationed(){
+    let div = document.createElement('div'),
+        style = div.style,
+        animationNames = ['animation','WebkitAnimation','OAnimation','msAnimation','MozAnimation'],
+        animationName = (() => {
+            for (let key of animationNames) {
+                if ( style[key] !== undefined ) return key;
+            }
+            return false;
+        })(),
+        aniEndName = {
+            animation : 'animationend',
+            WebkitAnimation : 'webkitAnimationEnd',
+            OAnimation : 'oAnimationEnd',
+            msAnimation : 'MSAnimationEnd',
+            MozAnimation : 'mozAnimationEnd'
+        }[ animationName ];
+    div = style = animationNames = animationName = null;
+    return aniEndName;
     }
 
     fadeOut(cbk){
         let fadeDone=0;
+
         let itemDone = () => {
+
             fadeDone++;
             if (fadeDone == this[0].length && cbk) cbk();
         };
         for (let ele of this[0]){
+
             ele.classList.add('fade-out-animation');
             let afterOut=()=>{
+
                 ele.classList.remove('fade-out-animation');
                 ele.style.display='none';
-                ele.removeEventListener("animationend",afterOut);
+                ele.removeEventListener(this.getAnimationed(),afterOut);
                 itemDone();
             };
-            ele.addEventListener("animationend", afterOut)
+            ele.addEventListener(this.getAnimationed(), afterOut);
         }
         return this;
 
@@ -62,6 +90,7 @@ class Misaka{
             ele.removeAttribute('style');
             ele.style.display=dsp;
             ele.classList.add('fade-in-animation');
+
             let afterIn=()=>{
                 ele.classList.remove('fade-in-animation');
                 ele.removeEventListener("animationend",afterIn);