@dolphinweex/weex-vue-render 0.2.114 → 0.2.116

package/dist/index.common.js

@@ -11294,49 +11294,137 @@ function detectEvents () {
 
 detectEvents();
 
+var animationLayerEl = null;
+var animationLayerRules = {};
+var animationLayerSeq = 1;
+
+function flushAnimationLayer () {
+    if (!animationLayerEl) {
+      animationLayerEl = document.createElement('style');
+      animationLayerEl.setAttribute('data-weex-animation-layer', '');
+      (document.head || document.documentElement).appendChild(animationLayerEl);
+    }
+    var css = '@layer weex-animation{';
+    for (var id in animationLayerRules) {
+      css += '[data-weex-ani="' + id + '"]{' + animationLayerRules[id] + '}';
+    }
+    css += '}';
+    animationLayerEl.textContent = css;
+}
+
+// 行内样式优先级高于 class。class 变化后再把动画终态降到 layer，
+// 普通 class 才能盖过 opacity、transform，播放过程中仍由行内样式生效。
+function demoteAnimationInline (dom, oldClass) {
+    __renderLog('[animation] classChange', {
+      id: dom._weexAniId || '',
+      oldClass: oldClass,
+      nextClass: dom.className,
+      animating: !!dom._activeTransition
+    });
+    if (dom._activeTransition) {
+      __renderLog('[animation] demoteSkip', { reason: 'animating' });
+      return
+    }
+    var locked = dom._ani_lock;
+    if (!locked) {
+      __renderLog('[animation] demoteSkip', { reason: 'noLock' });
+      return
+    }
+    var body = '';
+    var moved = {};
+    var has = false;
+    for (var key in locked) {
+      if (locked[key] == null || locked[key] === '') { continue }
+      body += key + ':' + locked[key] + ';';
+      moved[key] = locked[key];
+      dom.style.removeProperty(key);
+      has = true;
+    }
+    if (!has) {
+      __renderLog('[animation] demoteSkip', { reason: 'emptyLock' });
+      return
+    }
+    if (!dom._weexAniId) {
+      dom._weexAniId = 'weex-ani-' + (animationLayerSeq++);
+      dom.setAttribute('data-weex-ani', dom._weexAniId);
+    }
+    animationLayerRules[dom._weexAniId] = body;
+    flushAnimationLayer();
+    __renderLog('[animation] demote', {
+      id: dom._weexAniId,
+      moved: moved,
+      inlineOpacity: dom.style.opacity,
+      inlineTransform: dom.style.transform
+    });
+}
+
+function watchAnimationClass (dom) {
+    if (dom._aniClassObserver || typeof MutationObserver !== 'function') { return }
+    dom._aniClassObserver = new MutationObserver(function (records) {
+      var oldClass = records && records[0] ? records[0].oldValue : '';
+      demoteAnimationInline(dom, oldClass);
+    });
+    dom._aniClassObserver.observe(dom, { attributes: true, attributeFilter: ['class'], attributeOldValue: true });
+}
+
+function applyTransitionStyles (dom, config) {
+    if (config.styles && config.styles["transform"]) {
+      // translate 第三参在鸿蒙上无效，收成两参，避免过渡被判定为不合法而中断
+      config.styles["transform"] = config.styles["transform"].replace(/(translate\([^,]+,[^,]+),[^)]+\)/, '$1)');
+    }
+    var styled = utils$2.styleObject2rem(config.styles, DESIGN_ROOT_VALUE) || {};
+    var processed = hyphenateStyleKeys(styled);
+    var toCss = utils$2.toCSSText(processed) || '';
+    dom.animation_style = toCss;
+    watchAnimationClass(dom);
+    for (var key in processed) {
+      if (processed[key] == null || processed[key] === '') { continue }
+      dom.style.setProperty(key, String(processed[key]));
+    }
+}
+
 function transitionOnce (vnode, config, callback) {
     var nextFrame = utils$2.nextFrame;
-    var toCSSText = utils$2.toCSSText;
-    var styleObject2rem = utils$2.styleObject2rem;
     var isArray = utils$2.isArray;
 
     if (isArray(vnode)) {
       vnode = vnode[0];
     }
 
-    var duration = config.duration || 0; // ms
+    var duration = Number(config.duration) || 0; // ms
     var timing = config.timingFunction || 'linear';
-    var delay = config.delay || 0;  // ms
+    var delay = Number(config.delay) || 0;  // ms
 
     // TODO: parse transition properties
     var transitionValue = "all " + duration + "ms " + timing + " " + delay + "ms";
 
     var dom = vnode instanceof HTMLElement ? vnode : vnode.$el;
+    if (!dom) { return }
     // trigger image lazyloading by force.
-    dom && weex.utils.fireLazyload(dom, true);
-  
-    var ended = false;
-    var eventFinishTimer = null;
-    var cleanup = function () {
-      if (ended) { return }
-      ended = true;
-      if (eventFinishTimer) {
-        clearTimeout(eventFinishTimer);
-        eventFinishTimer = null;
-      }
-      if (endEvent) {
-        dom.removeEventListener(endEvent, transitionEndHandler);
-      }
+    weex.utils.fireLazyload(dom, true);
+
+    // 同一节点只保留最后一次动画。旧的收尾如果再去清 transition，
+    // 会把已经开始的下一次旋转直接停掉。
+    if (dom._activeTransition) {
+      dom._activeTransition.cancel();
+      dom._activeTransition = null;
+    }
+
+    // 原生 duration 为 0 时是同步改值。这里若拖到下一帧再加 60ms 兜底，
+    // 收尾会落到下一次 800ms 定时器之后，并把角度留在 rotate(360deg)。
+    if (duration + delay <= 0) {
       if (styleName) {
         dom.style[styleName] = '';
       }
-    };
-    var finish = function () {
-      if (ended) { return }
-      clearTimeout(timerId);
-      cleanup();
+      applyTransitionStyles(dom, config);
       callback && callback();
-    };
+      return
+    }
+
+    var ended = false;
+    var replaced = false;
+    var eventFinishTimer = null;
+    var timerId = null;
     var transitionEndHandler = function (event) {
       event && event.stopPropagation();
       // transitionend 会针对 opacity、transform 等属性分别触发。
@@ -11350,28 +11438,53 @@ function transitionOnce (vnode, config, callback) {
         finish();
       }, remaining + 16);
     };
+    var clearWatchers = function () {
+      if (eventFinishTimer) {
+        clearTimeout(eventFinishTimer);
+        eventFinishTimer = null;
+      }
+      if (timerId) {
+        clearTimeout(timerId);
+        timerId = null;
+      }
+      if (endEvent) {
+        dom.removeEventListener(endEvent, transitionEndHandler);
+      }
+    };
+    var session = {
+      cancel: function () {
+        if (ended) { return }
+        ended = true;
+        replaced = true;
+        clearWatchers();
+      }
+    };
+    var finish = function () {
+      if (ended) { return }
+      ended = true;
+      clearWatchers();
+      if (dom._activeTransition === session) {
+        if (styleName) {
+          dom.style[styleName] = '';
+        }
+        dom._activeTransition = null;
+      }
+      callback && callback();
+    };
     var startTime = Date.now();
+    dom._activeTransition = session;
     if (endEvent) {
       dom.style[styleName] = transitionValue;
       dom.addEventListener(endEvent, transitionEndHandler);
     }
     var totalMs = (duration + delay) + 60; // 兜底计时器，避免不触发 transitionend 时卡死
-    var timerId = setTimeout(function () {
+    timerId = setTimeout(function () {
       if (ended) { return }
       finish();
     }, totalMs);
     nextFrame(function () {
-      // 修改 transform：translate让它支持传3个参数，且第三个参数无效
-      if (config.styles["transform"]) {
-        config.styles["transform"] = config.styles["transform"].replace(/(translate\([^,]+,[^,]+),[^)]+\)/, '$1)')
-      }
-      var toCss = toCSSText(styleObject2rem(config.styles, DESIGN_ROOT_VALUE) || {})
-
-      //  给dom上标记是动画修改的style
-      if(!dom.animation_style) { dom.animation_style = "" }
-      dom.animation_style += toCss
-
-      dom.style.cssText += toCss;
+      if (ended || replaced) { return }
+      applyTransitionStyles(dom, config);
     });
 }
 

package/package.json

@@ -49,5 +49,5 @@
     "type": "git",
     "url": "git+ssh://git@github.com/weexteam/weex-vue-render.git"
   },
-  "version": "0.2.114"
+  "version": "0.2.116"
 }