animate.md

README.md

@@ -289,6 +289,8 @@ nodeppt一如既往的支持动效，2.0版本支持动效主要是页面内的
 
 在需要支持的动效父节点添加`.build`或者在具体的某个元素上添加`.tobuild+动效 class`即可。
 
+按照惯例，nodeppt 还支持`animate.css`的动效哦~
+
 详细查看文件：[site/animation.md](./site/animation.md)和[在线演示](https://js8.in/nodeppt/animation.html)
 
 ### 使用强大的`:::`完成复杂布局

gh-page.sh

@@ -0,0 +1,21 @@
+#! /bin/sh
+
+rm -rf publish
+cd site
+node ../packages/nodeppt/bin/nodeppt build index.md
+
+node ../packages/nodeppt/bin/nodeppt build animation.md
+node ../packages/nodeppt/bin/nodeppt build component.md
+node ../packages/nodeppt/bin/nodeppt build layout.md
+node ../packages/nodeppt/bin/nodeppt build classes.md
+node ../packages/nodeppt/bin/nodeppt build background.md
+
+cd dist
+
+git init
+git add -A
+date_str=`date "+DATE: %m/%d/%Y%nTIME: %H:%M:%S"`
+git commit -m "build with nodeppt on $date_str"
+#exit
+echo 'push remote github'
+git push -u [email protected]:ksky521/nodeppt.git master:gh-pages --force

packages/nodeppt-js/assets/scss/index.scss

@@ -23,3 +23,23 @@ i.fa {
     margin: 0 auto;
   }
 }
+
+.animated.delay-500 {
+  animation-delay: .5s;
+}
+
+.animated.delay-600 {
+  animation-delay: .6s;
+}
+
+.animated.delay-700 {
+  animation-delay: .7s;
+}
+
+.animated.delay-800 {
+  animation-delay: .8s;
+}
+
+.animated.delay-900 {
+  animation-delay: .9s;
+}

packages/nodeppt-js/assets/scss/modules/_build.scss

@@ -1,72 +1,72 @@
 /* Builds */
 
 .build.fadeIn {
-    >* {
-        transition: opacity 0.5s ease-in-out 0.2s;
-    }
-    .tobuild {
-        opacity: 0;
-    }
+  >* {
+    transition: opacity 0.5s ease-in-out 0.2s;
+  }
+  .tobuild {
+    opacity: 0;
+  }
 }
 
 .zoomIn>* {
-    animation: none;
+  animation: none;
 }
 
 .zoomIn {
-    >* {
-        opacity: 1;
-    }
-    .tobuild {
-        opacity: 0;
-    }
-    .building {
-        opacity: 1;
-        -webkit-animation-duration: .75s;
-        animation-duration: .75s;
-        -webkit-animation-fill-mode: both;
-        animation-fill-mode: both;
-    }
+  >* {
+    opacity: 1;
+  }
+  .tobuild {
+    opacity: 0;
+  }
+  .animated {
+    opacity: 1;
+    -webkit-animation-duration: .75s;
+    animation-duration: .75s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
 }
 
 .zoomIn {
-    .building {
-        -webkit-animation-name: zoomIn;
-        animation-name: zoomIn;
-    }
+  .animated {
+    -webkit-animation-name: zoomIn;
+    animation-name: zoomIn;
+  }
 }
 
 .moveIn {
-    >* {
-        transition: all 0.5s ease-in-out 0.2s;
-    }
-    .tobuild {
-        opacity: 0;
-        transform: translate3d(60px, 0, 0);
-    }
+  >* {
+    transition: all 0.5s ease-in-out 0.2s;
+  }
+  .tobuild {
+    opacity: 0;
+    transform: translate3d(60px, 0, 0);
+  }
 }
 
 .rollIn {
-    >* {
-        transition: all 0.4s ease;
-    }
-    .building {
-        opacity: 1;
-        visibility: visible;
-        transform: rotateX(0);
-    }
-    .tobuild {
-        opacity: 0;
-        visibility: hidden;
-        transform: rotateX(90deg);
-    }
+  >* {
+    transition: all 0.4s ease;
+  }
+  .animated {
+    opacity: 1;
+    visibility: visible;
+    transform: rotateX(0);
+  }
+  .tobuild {
+    opacity: 0;
+    visibility: hidden;
+    transform: rotateX(90deg);
+  }
 }
 
 section .build,
 section .tobuild {
-    animation: none;
+  animation: none;
 }
 
-section .tobuild{
-    opacity: 0;
+section .tobuild {
+  opacity: 0;
 }

packages/nodeppt-js/index.js

@@ -1,6 +1,7 @@
 import WebSlides from 'webslides/src/js/modules/webslides';
 import './assets/scss/full.scss';
 import './assets/scss/index.scss';
+import 'animate.css';
 // import ItemBuild from './lib/item-build';
 import Keyboard from './lib/keyboard';
 import SpeakerMode from './lib/speaker-mode';

packages/nodeppt-js/lib/item-build.js

@@ -37,12 +37,12 @@ export default class ItemBuild {
         }
         const $curSlide = this.curSlide.el;
 
-        const subBuilded = toArray($curSlide.querySelectorAll('.building'));
+        const subBuilded = toArray($curSlide.querySelectorAll('.animated'));
         let list;
         if (subBuilded.length) {
             while ((list = subBuilded.shift())) {
                 list = list.classList;
-                list.remove('building');
+                list.remove('animated');
                 list.add('builded');
             }
         }
@@ -61,7 +61,7 @@ export default class ItemBuild {
         list = item.classList;
         list.remove('tobuild');
 
-        list.add('building');
+        list.add('animated');
         return true;
     }
 
@@ -73,23 +73,23 @@ export default class ItemBuild {
         }
         const $curSlide = this.curSlide.el;
 
-        const subBuilded = toArray($curSlide.querySelectorAll('.building'));
+        const subBuilded = toArray($curSlide.querySelectorAll('.animated'));
 
         let list;
-        let buildingLen = subBuilded.length;
+        let animatedLen = subBuilded.length;
         let curList;
 
-        if (buildingLen) {
+        if (animatedLen) {
             while ((list = subBuilded.shift())) {
                 let clist = list.classList;
-                clist.remove('building');
+                clist.remove('animated');
                 clist.add('tobuild');
                 curList = list;
             }
         }
         const builded = toArray($curSlide.querySelectorAll('.builded'));
 
-        if (!builded.length && !buildingLen) {
+        if (!builded.length && !animatedLen) {
             // 继续下一页
             this.enable_ = false;
             this.ws.enable();
@@ -104,13 +104,13 @@ export default class ItemBuild {
             }
             list = item.classList;
             list.remove('builded');
-            if (buildingLen === 0) {
+            if (animatedLen === 0) {
                 list.add('tobuild');
                 item = builded.pop();
                 item.classList.remove('builded');
-                item.classList.add('building');
+                item.classList.add('animated');
             } else {
-                list.add('building');
+                list.add('animated');
             }
         }
         return true;

packages/nodeppt-js/package.json

@@ -31,6 +31,7 @@
         "markdown"
     ],
     "dependencies": {
+        "animate.css": "^3.7.0",
         "webslides": "1.4.2"
     }
 }