Skip to content

Commit

Permalink
fix: can not show a disabled Animate when it leaving, close #22
Browse files Browse the repository at this point in the history
  • Loading branch information
@Javey
Javey committed Jun 27, 2019
1 parent ca37133 commit 96f7cf1
Show file tree
Hide file tree
Showing 7 changed files with 211 additions and 93 deletions.
84 changes: 55 additions & 29 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6129,9 +6129,16 @@ var TransitionEvents = {

var raf = void 0;
function nextFrame(fn) {
var _fn = function _fn() {
if (_fn.cancelled) return;
fn();
};
raf(function () {
return raf(fn);
return raf(_fn);
});
return function () {
_fn.cancelled = true;
};
}

if (inBrowser) {
Expand Down Expand Up @@ -6310,7 +6317,6 @@ function isRemoveDirectly(instance) {
}

function leave(o) {
if (o.get('a:disabled')) return;
// maybe a a:show animation is leaving
if (o._leaving) return;

Expand All @@ -6320,6 +6326,19 @@ function leave(o) {

var isCss = o.get('a:css');
var continuity = o.get('a:continuity');
var disabled = o.get('a:disabled');

var endDirectly = false;
if (o._entering) {
if (continuity && !o._triggeredEnter) {
endDirectly = true;
o._cancelEnterNextFrame();
}
o._enterEnd(null, true);
}

if (disabled) return o.leaveEndCallback();

var vNode = o.vNode;
var parentDom = o._parentDom;
// vNode都会被添加key，当只有一个子元素时，vNode.key === undefined
Expand All @@ -6331,14 +6350,6 @@ function leave(o) {

o._leaving = true;

var endDirectly = false;
if (o._entering) {
if (continuity && !o._triggeredEnter) {
endDirectly = true;
}
o._enterEnd(null, true);
}

initLeaveEndCallback(o);

// 为了保持动画连贯，我们立即添加leaveActiveClass
Expand All @@ -6354,9 +6365,7 @@ function leave(o) {
if (!endDirectly) {
// TransitionEvents.on(element, o._leaveEnd);
// triggerLeave(o);
nextFrame(function () {
// 1. 如果leave动画还没得及执行，就enter了，此时啥也不做
if (o._unmountCancelled) return;
o._cancelLeaveNextFrame = nextFrame(function () {
// 存在一种情况，当一个enter动画在完成的瞬间，
// 这个元素被删除了，由于前面保持动画的连贯性
// 添加了leaveActiveClass，则会导致绑定的leaveEnd
Expand Down Expand Up @@ -6388,13 +6397,15 @@ function initLeaveEndCallback(o) {
_parentDom = o._parentDom,
vNode = o.vNode;

var isCss = o.get('a:css');
var disabled = o.get('a:disabled');

o._leaveEnd = function (e, isCancel) {
if (e && e.target !== element) return;

TransitionEvents.off(element, o._leaveEnd);

if (o.get('a:css') && !o.get('a:disabled')) {
if (isCss && !disabled) {
e && e.stopPropagation && e.stopPropagation();
o._removeClass(o.leaveClass);
o._removeClass(o.leaveActiveClass);
Expand All @@ -6416,7 +6427,7 @@ function initLeaveEndCallback(o) {
}

o.trigger('a:leaveEnd', element, isCancel);
if (!o._unmountCancelled) {
if (!isCancel) {
o.leaveEndCallback(true);
}
};
Expand All @@ -6440,13 +6451,12 @@ prototype._mount = function (lastVNode, vNode) {
if (lastInstance._leaving) {
this.lastInstance = lastInstance;
} else {
lastInstance._unmountCancelled = true;
lastInstance._cancelLeaveNextFrame();
}
}

this.parentInstance = getParentAnimate(this);

initEnterEndCallback(this);
initUnmountCallback(this, vNode);

startEnterAnimate(this);
Expand All @@ -6459,6 +6469,16 @@ function initAShow(o) {
if (!o.get('a:show')) {
element.style.display = 'none';
}

// o.on('$change:a:disabled', (c, v) => {
// if (v) {
// const lastInstance = o.lastInstance;
// if (lastInstance && lastInstance._leaving === true) {
// lastInstance._leaveEnd();
// }
// }
// });

o.on('$changed:a:show', function (c, v) {
// 如果是appear动画，则在show/hide改为enter动画
if (o.isAppear) {
Expand All @@ -6468,17 +6488,16 @@ function initAShow(o) {
if (v) {
// 如果在leaveEnd事件中，又触发了enter
// 此时_leaving为false，如果不清空lastInstance
// 将会再次触发leaveEnd，但是还是需要cancel掉
// 将会在enter中再次触发leaveEnd
var lastInstance = o.lastInstance;
if (lastInstance && lastInstance._leaving === false) {
lastInstance._unmountCancelled = true;
o.leaveEndCallback = noop;
o.lastInstance = null;
}
element.style.display = originDisplay;
startEnterAnimate(o);
} else {
o.lastInstance = o;
o._unmountCancelled = false;
o.leaveEndCallback = function () {
element.style.display = 'none';
o.lastInstance = null;
Expand All @@ -6500,12 +6519,13 @@ function startEnterAnimate(o) {
}

function enter(o) {
if (o.get('a:disabled') || !o.get('a:show') || o._entering) return;
if (!o.get('a:show') || o._entering) return;

var element = o.element;
var isCss = o.get('a:css');
var enterStart = o.get('a:enterStart');
var continuity = o.get('a:continuity');
var disabled = o.get('a:disabled');

// getAnimateType将添加enter-active className，在firefox下将导致动画提前执行
// 我们应该先于添加`enter` className去调用该函数
Expand All @@ -6519,15 +6539,19 @@ function enter(o) {
if (o.lastInstance) {
endDirectly = continuity && !o.lastInstance._triggeredLeave;

o.lastInstance._unmountCancelled = true;
o.lastInstance._cancelLeaveNextFrame();
o.lastInstance._leaveEnd(null, true);

// 保持连贯，添加leaveActiveClass
if (continuity && !endDirectly && isCss) {
if (continuity && !endDirectly && isCss && !disabled) {
o._addClass(o.enterActiveClass);
}
}

if (disabled) return;

initEnterEndCallback(o);

function start() {
o._entering = true;

Expand All @@ -6541,7 +6565,7 @@ function enter(o) {
TransitionEvents.on(element, o._enterEnd);

if (isTransition) {
nextFrame(function () {
o._cancelEnterNextFrame = nextFrame(function () {
return triggerEnter(o);
});
} else {
Expand Down Expand Up @@ -6575,9 +6599,9 @@ function triggerEnter(o) {
var element = o.element;

if (o.get('a:css')) {
if (o._entering === false) {
return o._removeClass(o.enterActiveClass);
}
// if (o._entering === false) {
// return o._removeClass(o.enterActiveClass);
// }
o._addClass(o.enterActiveClass);
o._removeClass(o.enterClass);
}
Expand Down Expand Up @@ -6639,13 +6663,15 @@ function initEnterEndCallback(o) {
var element = o.element,
parentInstance = o.parentInstance;

var isCss = o.get('a:css');
var disabled = o.get('a:disabled');

o._enterEnd = function (e, isCancel) {
if (e && e.target !== element) return;

TransitionEvents.off(element, o._enterEnd);

if (o.get('a:css') && !o.get('a:disabled')) {
if (isCss && !disabled) {
e && e.stopPropagation && e.stopPropagation();
o._removeClass(o.enterClass);
o._removeClass(o.enterActiveClass);
Expand Down Expand Up @@ -6699,7 +6725,7 @@ function unmountCallback(o) {
return;
}

var isNotAnimate = !o.get('a:css') && !hasJsTransition(o) || o.get('a:disabled');
var isNotAnimate = !o.get('a:css') && !hasJsTransition(o);

if (parentInstance && !isNotAnimate) {
parentInstance._leavingAmount++;
Expand Down

0 comments on commit 96f7cf1

Please sign in to comment.