Skip to content

Commit

Permalink
feat: support show/hide animation, #17 ksc-fe/kpc#278
Browse files Browse the repository at this point in the history
  • Loading branch information
@Javey
Javey committed May 23, 2019
1 parent 3be6dc3 commit ed139a6
Show file tree
Hide file tree
Showing 7 changed files with 284 additions and 100 deletions.
106 changes: 74 additions & 32 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5232,8 +5232,10 @@ Intact$2.prototype.set = function _set(key, val, options) {
}
} else if (this.mountedQueue && this._startRender) {
// 如果是父组件导致子组件更新，此时存在mountedQueue
// 则在组件数更新完毕，触发$changed事件
this.mountedQueue.push(function () {
// 则在组件树更新完毕，触发$changed事件
// 现将该事件暂存起来，待子组件更新完毕在加入mountedQueue
// 以保证子组件的事件优先于父组件执行
this._pendingChangedEvents.push(function () {
triggerChangedEvent(_this, changes);
});
}
Expand Down Expand Up @@ -5533,6 +5535,10 @@ Intact$2.prototype.update = function (lastVNode, nextVNode, fromPending) {
// 又触发了父组件的数据变更，此时父组件渲染完成执行_pendingUpdate
// 是没有lastVNode的
if (nextVNode && lastVNode) {
// 可能在更新的过程中，又触发了更新，所以这里判断是否存在
if (!this._pendingChangedEvents) {
this._pendingChangedEvents = [];
}
patchProps$1(this, lastVNode.props, nextVNode.props);
}

Expand Down Expand Up @@ -5661,6 +5667,14 @@ function updateComponent(o, lastVNode, nextVNode) {
o.element = o.vdt.update(o, o.parentDom, o.mountedQueue, nextVNode || o.vNode, o.isSVG, o.get('_blocks'));
// 让整个更新完成，才去触发_update生命周期函数
if (o.mountedQueue) {
// 加入$changed事件队列
var events = o._pendingChangedEvents;
if (events) {
for (var i = 0; i < events.length; i++) {
o.mountedQueue.push(events[i]);
}
o._pendingChangedEvents = null;
}
o.mountedQueue.push(function () {
o._update(lastVNode, nextVNode);
});
Expand Down Expand Up @@ -6436,10 +6450,16 @@ function initAShow(o) {
if (!o.get('a:show')) {
element.style.display = 'none';
}
o.on('$change:a:show', function (c, v) {
if (v) element.style.display = originDisplay;
});
// 让display设置提前，以便于父组件获取该元素的位置属性
// o.on('$change:a:show', (c, v) => {
// if (v) element.style.display = originDisplay;
// });
o.on('$changed:a:show', function (c, v) {
// 如果是appear动画，则在show/hide改为enter动画
if (o.isAppear) {
o.isAppear = false;
initClassName(o);
}
if (v) {
// 如果在leaveEnd事件中，又触发了enter
// 此时_leaving为false，如果不清空lastInstance
Expand All @@ -6449,7 +6469,7 @@ function initAShow(o) {
lastInstance._unmountCancelled = true;
o.lastInstance = null;
}
// element.style.display = originDisplay;
element.style.display = originDisplay;
startEnterAnimate(o);
} else {
o.lastInstance = o;
Expand Down Expand Up @@ -6478,20 +6498,14 @@ function enter(o) {
if (o.get('a:disabled') || !o.get('a:show') || o._entering) return;

var element = o.element;
var enterClass = o.enterClass;
var enterActiveClass = o.enterActiveClass;
var isCss = o.get('a:css');

// getAnimateType将添加enter-active className，在firefox下将导致动画提前执行
// 我们应该先于添加`enter` className去调用该函数
var isTransition = false;
if (isCss && getAnimateType(element, enterActiveClass) !== 'animation') {
isTransition = true;
}

// let cancel = false;
var keepContinuity = false;
var endDirectly = false;
// 如果这个元素是上一个删除的元素，则从当前状态回到原始状态
if (o.lastInstance) {
var endDirectly = !o.lastInstance._triggeredLeave;
endDirectly = !o.lastInstance._triggeredLeave;

o.lastInstance._unmountCancelled = true;
o.lastInstance._leaveEnd();
Expand All @@ -6502,38 +6516,64 @@ function enter(o) {
// o._addClass(enterClass);

// change: 这种情况不处理
return;
// cancel = true;
} else {
// addClass(element, enterActiveClass);
// 保持连贯，添加leaveActiveClass
o._addClass(o.leaveActiveClass);
// o._addClass(o.leaveActiveClass);
keepContinuity = true;
}
}
} else if (isCss) {
o._addClass(enterClass);
}

o._entering = true;
function start() {
o._entering = true;

TransitionEvents.on(element, o._enterEnd);
o.trigger(o.enterEventName + 'Start', element);

o.trigger(o.enterEventName + 'Start', element);
if (!endDirectly) {
if (keepContinuity) {
o._addClass(o.leaveActiveClass);
} else if (isCss) {
o._addClass(o.enterClass);
}

if (isTransition) {
nextFrame(function () {
return triggerEnter(o);
// getAnimateType将添加enter-active className，在firefox下将导致动画提前执行
// 我们应该先于添加`enter` className去调用该函数
var isTransition = false;
if (isCss && getAnimateType(element, o.enterActiveClass) !== 'animation') {
isTransition = true;
}

TransitionEvents.on(element, o._enterEnd);

if (isTransition) {
nextFrame(function () {
return triggerEnter(o);
});
} else {
// 对于animation动画，同步添加enterActiveClass，避免闪动
triggerEnter(o);
}
} else {
o._enterEnd();
}
}

// support Promise
var enterStart = o.get('a:enterStart');
if (enterStart && (enterStart = enterStart(element)) && enterStart.then) {
enterStart.then(function () {
if (o.destroyed || !o.get('a:show')) return;
start();
});
} else {
// 对于animation动画，同步添加enterActiveClass，避免闪动
triggerEnter(o);
start();
}
}

function triggerEnter(o) {
var element = o.element;

o._triggeredEnter = true;

if (o.get('a:css')) {
if (o._entering === false) {
return o._removeClass(o.enterActiveClass);
Expand All @@ -6543,6 +6583,8 @@ function triggerEnter(o) {
o._removeClass(o.leaveActiveClass);
}

o._triggeredEnter = true;

o.trigger(o.enterEventName, element, o._enterEnd);
}

Expand Down Expand Up @@ -6575,7 +6617,7 @@ function initClassName(o, newValue, oldValue) {
enterActiveClass = transition + '-enter-active';
}

o.isAppear = isAppear;
// o.isAppear = isAppear;
o.enterClass = enterClass;
o.enterActiveClass = enterActiveClass;
o.leaveClass = transition + '-leave';
Expand Down
106 changes: 74 additions & 32 deletions dist/intact.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5236,8 +5236,10 @@ Intact$2.prototype.set = function _set(key, val, options) {
}
} else if (this.mountedQueue && this._startRender) {
// 如果是父组件导致子组件更新，此时存在mountedQueue
// 则在组件数更新完毕，触发$changed事件
this.mountedQueue.push(function () {
// 则在组件树更新完毕，触发$changed事件
// 现将该事件暂存起来，待子组件更新完毕在加入mountedQueue
// 以保证子组件的事件优先于父组件执行
this._pendingChangedEvents.push(function () {
triggerChangedEvent(_this, changes);
});
}
Expand Down Expand Up @@ -5537,6 +5539,10 @@ Intact$2.prototype.update = function (lastVNode, nextVNode, fromPending) {
// 又触发了父组件的数据变更，此时父组件渲染完成执行_pendingUpdate
// 是没有lastVNode的
if (nextVNode && lastVNode) {
// 可能在更新的过程中，又触发了更新，所以这里判断是否存在
if (!this._pendingChangedEvents) {
this._pendingChangedEvents = [];
}
patchProps$1(this, lastVNode.props, nextVNode.props);
}

Expand Down Expand Up @@ -5665,6 +5671,14 @@ function updateComponent(o, lastVNode, nextVNode) {
o.element = o.vdt.update(o, o.parentDom, o.mountedQueue, nextVNode || o.vNode, o.isSVG, o.get('_blocks'));
// 让整个更新完成，才去触发_update生命周期函数
if (o.mountedQueue) {
// 加入$changed事件队列
var events = o._pendingChangedEvents;
if (events) {
for (var i = 0; i < events.length; i++) {
o.mountedQueue.push(events[i]);
}
o._pendingChangedEvents = null;
}
o.mountedQueue.push(function () {
o._update(lastVNode, nextVNode);
});
Expand Down Expand Up @@ -6440,10 +6454,16 @@ function initAShow(o) {
if (!o.get('a:show')) {
element.style.display = 'none';
}
o.on('$change:a:show', function (c, v) {
if (v) element.style.display = originDisplay;
});
// 让display设置提前，以便于父组件获取该元素的位置属性
// o.on('$change:a:show', (c, v) => {
// if (v) element.style.display = originDisplay;
// });
o.on('$changed:a:show', function (c, v) {
// 如果是appear动画，则在show/hide改为enter动画
if (o.isAppear) {
o.isAppear = false;
initClassName(o);
}
if (v) {
// 如果在leaveEnd事件中，又触发了enter
// 此时_leaving为false，如果不清空lastInstance
Expand All @@ -6453,7 +6473,7 @@ function initAShow(o) {
lastInstance._unmountCancelled = true;
o.lastInstance = null;
}
// element.style.display = originDisplay;
element.style.display = originDisplay;
startEnterAnimate(o);
} else {
o.lastInstance = o;
Expand Down Expand Up @@ -6482,20 +6502,14 @@ function enter(o) {
if (o.get('a:disabled') || !o.get('a:show') || o._entering) return;

var element = o.element;
var enterClass = o.enterClass;
var enterActiveClass = o.enterActiveClass;
var isCss = o.get('a:css');

// getAnimateType将添加enter-active className，在firefox下将导致动画提前执行
// 我们应该先于添加`enter` className去调用该函数
var isTransition = false;
if (isCss && getAnimateType(element, enterActiveClass) !== 'animation') {
isTransition = true;
}

// let cancel = false;
var keepContinuity = false;
var endDirectly = false;
// 如果这个元素是上一个删除的元素，则从当前状态回到原始状态
if (o.lastInstance) {
var endDirectly = !o.lastInstance._triggeredLeave;
endDirectly = !o.lastInstance._triggeredLeave;

o.lastInstance._unmountCancelled = true;
o.lastInstance._leaveEnd();
Expand All @@ -6506,38 +6520,64 @@ function enter(o) {
// o._addClass(enterClass);

// change: 这种情况不处理
return;
// cancel = true;
} else {
// addClass(element, enterActiveClass);
// 保持连贯，添加leaveActiveClass
o._addClass(o.leaveActiveClass);
// o._addClass(o.leaveActiveClass);
keepContinuity = true;
}
}
} else if (isCss) {
o._addClass(enterClass);
}

o._entering = true;
function start() {
o._entering = true;

TransitionEvents.on(element, o._enterEnd);
o.trigger(o.enterEventName + 'Start', element);

o.trigger(o.enterEventName + 'Start', element);
if (!endDirectly) {
if (keepContinuity) {
o._addClass(o.leaveActiveClass);
} else if (isCss) {
o._addClass(o.enterClass);
}

if (isTransition) {
nextFrame(function () {
return triggerEnter(o);
// getAnimateType将添加enter-active className，在firefox下将导致动画提前执行
// 我们应该先于添加`enter` className去调用该函数
var isTransition = false;
if (isCss && getAnimateType(element, o.enterActiveClass) !== 'animation') {
isTransition = true;
}

TransitionEvents.on(element, o._enterEnd);

if (isTransition) {
nextFrame(function () {
return triggerEnter(o);
});
} else {
// 对于animation动画，同步添加enterActiveClass，避免闪动
triggerEnter(o);
}
} else {
o._enterEnd();
}
}

// support Promise
var enterStart = o.get('a:enterStart');
if (enterStart && (enterStart = enterStart(element)) && enterStart.then) {
enterStart.then(function () {
if (o.destroyed || !o.get('a:show')) return;
start();
});
} else {
// 对于animation动画，同步添加enterActiveClass，避免闪动
triggerEnter(o);
start();
}
}

function triggerEnter(o) {
var element = o.element;

o._triggeredEnter = true;

if (o.get('a:css')) {
if (o._entering === false) {
return o._removeClass(o.enterActiveClass);
Expand All @@ -6547,6 +6587,8 @@ function triggerEnter(o) {
o._removeClass(o.leaveActiveClass);
}

o._triggeredEnter = true;

o.trigger(o.enterEventName, element, o._enterEnd);
}

Expand Down Expand Up @@ -6579,7 +6621,7 @@ function initClassName(o, newValue, oldValue) {
enterActiveClass = transition + '-enter-active';
}

o.isAppear = isAppear;
// o.isAppear = isAppear;
o.enterClass = enterClass;
o.enterActiveClass = enterActiveClass;
o.leaveClass = transition + '-leave';
Expand Down
6 changes: 3 additions & 3 deletions dist/intact.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit ed139a6

Please sign in to comment.