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

ly525
1 parent 3d8dee71
Showing 3 changed files with 28 additions and 3 deletions
back-end/h5-api/public/third-libs/swiper-animation.umd.min.js
back-end/h5-api/views/engine.ejs
front-end/h5/src/components/core/models/element.js
+/*!
+ * @cycjimmy/swiper-animation v4.0.1
+ * Homepage: https://github.com/cycjimmy/swiper-animation#readme
+ * Released under the MIT License.
+ */
+!function(t,e){'object'==typeof exports&&'undefined'!=typeof module?module.exports=e():'function'==typeof define&&define.amd?define(e):(t=t||self).SwiperAnimation=e();}(this,(function(){'use strict';function t(t,e){if(!(t instanceof e))throw new TypeError('Cannot call a class as a function');}function e(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,'value'in i&&(i.writable=!0),Object.defineProperty(t,i.key,i);}}function n(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t;}function i(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n;}}(t)||function(t){if(Symbol.iterator in Object(t)||'[object Arguments]'===Object.prototype.toString.call(t))return Array.from(t);}(t)||function(){throw new TypeError('Invalid attempt to spread non-iterable instance');}();}var a=!1,o=function(){return!!window.Promise;},r=function(){if(!a&&!o()){var t=document.createElement('script');t.type='text/javascript',t.src='https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js',document.querySelector('head').appendChild(t),a=!0;}};function s(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,'default')?t.default:t;}function u(t,e){return t(e={exports:{}},e.exports),e.exports;}var c=u((function(t,e){Object.defineProperty(e,'__esModule',{value:!0}),e.default=void 0;e.default=function(t){return'[object NodeList]'===Object.prototype.toString.call(t);};}));s(c);var l=s(u((function(t,e){Object.defineProperty(e,'__esModule',{value:!0}),e.default=void 0;var n,i=(n=c)&&n.__esModule?n:{default:n};e.default=function(t){return Array.isArray(t)?t:(0,i.default)(t)?Array.from?Array.from(t):Array.prototype.slice.call(t):new Array(t);};}))),f=function(t){t.forEach((function(t){t.animationData={styleCache:t.attributes.style?'visibility: hidden;'+t.style.cssText:'visibility: hidden;',effect:t.dataset.swiperAnimation||t.dataset.swiperAnimationOnce||'',duration:t.dataset.duration||'.5s',delay:t.dataset.delay||'.5s',outEffect:t.dataset.swiperOutAnimation||'',outDuration:t.dataset.outDuration||'.5s',isRecovery:!0,runOnce:!!t.dataset.swiperAnimationOnce},t.style.cssText=t.animationData.styleCache;}));},d=u((function(t,e){Object.defineProperty(e,'__esModule',{value:!0}),e.default=void 0;e.default=function(t){return'Promise'===Object.prototype.toString.call(t).slice(8,-1);};}));s(d);var m=s(u((function(t,e){Object.defineProperty(e,'__esModule',{value:!0}),e.default=void 0;var n,i=(n=d)&&n.__esModule?n:{default:n};e.default=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return(0,i.default)(t)?t:new Promise((function(n){t(),setTimeout(n,e);}));};}))),y=function(t){if(t.el)return t.el;if(t.container)return t.container[0];throw new Error('Illegal swiper instance');},p=function(){function e(n){t(this,e),this.swiper=n,this.container=y(this.swiper),this.animationElements=[].concat(i(l(this.container.querySelectorAll('[data-swiper-animation]'))),i(l(this.container.querySelectorAll('[data-swiper-animation-once]')))),this.activeElements=[],f(this.animationElements);}return n(e,[{key:'animate',value:function(){var t=this;return Promise.resolve().then((function(){return e=t.activeElements,n=e.map((function(t){return t.animationData.isRecovery?Promise.resolve():t.animationData.outEffect?m((function(){t.style.cssText=t.styleCache,t.style.visibility='visible',t.style.cssText+=' animation-duration:'.concat(t.animationData.outDuration,'; -webkit-animation-duration:').concat(t.animationData.outDuration,';'),t.classList.add(t.animationData.outEffect,'animated');}),500):Promise.resolve();})),Promise.all(n);var e,n;})).then((function(){return e=t.activeElements,n=e.map((function(t){return t.animationData.isRecovery?Promise.resolve():t.animationData.runOnce?Promise.resolve():m((function(){var e;t.style.cssText=t.animationData.styleCache,(e=t.classList).remove.apply(e,i([t.animationData.effect,t.animationData.outEffect,'animated'].filter((function(t){return!!t;})))),t.animationData.isRecovery=!0;}));})),Promise.all(n);var e,n;})).then((function(){return e=t._updateActiveElements(),n=e.map((function(t){return t.animationData?m((function(){t.style.visibility='visible',t.style.cssText+=' animation-duration:'.concat(t.animationData.duration,'; -webkit-animation-duration:').concat(t.animationData.duration,'; animation-delay:').concat(t.animationData.delay,'; -webkit-animation-delay:').concat(t.animationData.delay,';'),t.classList.add(t.animationData.effect,'animated'),t.animationData.isRecovery=!1;})):Promise.resolve();})),Promise.all(n);var e,n;}));}},{key:'_updateActiveElements',value:function(){return this.activeElements=[].concat(i(l(this.swiper.slides[this.swiper.activeIndex].querySelectorAll('[data-swiper-animation]'))),i(l(this.swiper.slides[this.swiper.activeIndex].querySelectorAll('[data-swiper-animation-once]')))),this.activeElements;}}]),e;}();return function(){function e(){t(this,e),this.animations=null,o()||r();}return n(e,[{key:'init',value:function(t){return this.animations||(this.animations=new p(t)),this;}},{key:'animate',value:function(){var t=this;return o()?this.animations.animate():setTimeout((function(){return t.animate();}),500);}}]),e;}();}));
 \ No newline at end of file
 <!--
  * @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) {
@@ -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' } = {}) {