fix: #119 run animation when slide changes; (zh) 滚动页面时候执行动画

ly525 · ly525 · commit 796a5e18f5b9 · 2020-01-24T21:42:06.000+08:00
diff --git a/back-end/h5-api/public/third-libs/swiper-animation.umd.min.js b/back-end/h5-api/public/third-libs/swiper-animation.umd.min.js
diff --git a/back-end/h5-api/views/engine.ejs b/back-end/h5-api/views/engine.ejs
@@ -1,8 +1,8 @@
 <!--
  * @Author: ly525
  * @Date: 2019-12-04 20:24:04
- * @LastEditors: ly525
- * @LastEditTime: 2019-12-15 16:39:33
+ * @LastEditors  : ly525
+ * @LastEditTime : 2020-01-24 21:03:29
  * @FilePath: /luban-h5/back-end/h5-api/views/engine.ejs
  * @Github: https://github.com/ly525/luban-h5
  * @Description: 手机端预览模板
@@ -23,6 +23,7 @@
   <link rel="stylesheet" href="/third-libs/animate.min.css">
   <link rel="stylesheet" href="/third-libs/swiper.min.css">
   <script src="/third-libs/swiper.min.js"></script>
+  <script src="/third-libs/swiper-animation.umd.min.js"></script>
   <script>window.__work = <%- JSON.stringify(work) %></script>
   <script src="/engine-assets/engine.umd.js"></script>
   <style>
@@ -256,6 +257,8 @@
     });
   </script>
   <script>
+    const swiperAnimation = new SwiperAnimation();
+
     var mySwiper = new Swiper('.swiper-container', {
       // Optional parameters
       direction: 'vertical',
@@ -273,6 +276,14 @@
       scrollbar: {
         el: '.swiper-scrollbar',
       },
+      on: {
+        init: function () {
+          swiperAnimation.init(this).animate();
+        },
+        slideChange: function () {
+          swiperAnimation.init(this).animate();
+        }
+      }
     });
 
     function title(str) {
diff --git a/front-end/h5/src/components/core/models/element.js b/front-end/h5/src/components/core/models/element.js
@@ -94,9 +94,17 @@ class Element {
   }
 
   getAttrs () {
-    return {
+    const attrs = {
       'data-uuid': this.uuid
     }
+
+    if (this.animations.length > 0) {
+      const animation = this.animations[0]
+      attrs['data-swiper-animation'] = animation.type // "fadeIn"
+      attrs['data-duration'] = `${animation.duration}s` // ".5s"
+      attrs['data-delay'] = `${animation.delay}s` // "1s"
+    }
+    return attrs
   }
 
   getPreviewData ({ position = 'static', isRem = false, mode = 'preview' } = {}) {

Original file line number	Diff line number	Diff line change
`@@ -94,9 +94,17 @@ class Element {`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`getAttrs () {`
`97`		`- return {`
	`97`	`+ const attrs = {`
`98`	`98`	`'data-uuid': this.uuid`
`99`	`99`	`}`
	`100`	`+`
	`101`	`+ if (this.animations.length > 0) {`
	`102`	`+ const animation = this.animations[0]`
	`103`	`+ attrs['data-swiper-animation'] = animation.type // "fadeIn"`
	`104`	+ attrs['data-duration'] = `${animation.duration}s` // ".5s"
	`105`	+ attrs['data-delay'] = `${animation.delay}s` // "1s"
	`106`	`+ }`
	`107`	`+ return attrs`
`100`	`108`	`}`
`101`	`109`
`102`	`110`	`getPreviewData ({ position = 'static', isRem = false, mode = 'preview' } = {}) {`