From a7d184e44f79b4b93592215dcb96d92de6d1a4f1 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 15 Nov 2013 00:22:17 -0500 Subject: [PATCH] transition class can take format of "enter,leave" --- src/compiler.js | 2 +- src/directives/repeat.js | 2 +- src/transition.js | 9 +++++++-- src/utils.js | 16 ++++++++++++++++ test/functional/fixtures/transition.html | 12 +++++++++--- test/functional/specs/transition.js | 8 ++++---- test/unit/specs/transition.js | 10 +++++----- 7 files changed, 43 insertions(+), 16 deletions(-) diff --git a/src/compiler.js b/src/compiler.js index 6731fd47bba..2ffbb74cb72 100644 --- a/src/compiler.js +++ b/src/compiler.js @@ -259,7 +259,7 @@ CompilerProto.compile = function (node, root) { // CSS class transition if (transClass) { - node.sd_trans_class = transClass + node.sd_trans_class = utils.split(transClass) } // finally, only normal directives left! diff --git a/src/directives/repeat.js b/src/directives/repeat.js index b86c77234dd..f9eab303c6f 100644 --- a/src/directives/repeat.js +++ b/src/directives/repeat.js @@ -159,7 +159,7 @@ module.exports = { // add transition info node.sd_trans = this.trans - node.sd_trans_class = this.transClass + node.sd_trans_class = utils.split(this.transClass) // append node into DOM first // so sd-if can get access to parentNode diff --git a/src/transition.js b/src/transition.js index 6f88a21d986..1aa1da5e0a1 100644 --- a/src/transition.js +++ b/src/transition.js @@ -54,7 +54,7 @@ transition.codes = codes /** * Togggle a CSS class to trigger transition */ -function applyTransitionClass (el, stage, changeState, className) { +function applyTransitionClass (el, stage, changeState, classes) { if (!endEvent) { changeState() @@ -62,10 +62,13 @@ function applyTransitionClass (el, stage, changeState, className) { } var classList = el.classList, - lastLeaveCallback = el.sd_trans_cb + lastLeaveCallback = el.sd_trans_cb, + className if (stage > 0) { // enter + className = classes[0] + // cancel unfinished leave transition if (lastLeaveCallback) { el.removeEventListener(endEvent, lastLeaveCallback) @@ -85,6 +88,8 @@ function applyTransitionClass (el, stage, changeState, className) { } else { // leave + className = classes[classes.length > 1 ? 1 : 0] + // trigger hide transition classList.add(className) var onEnd = function (e) { diff --git a/src/utils.js b/src/utils.js index 20f87b22dfc..5c749d8ed6c 100644 --- a/src/utils.js +++ b/src/utils.js @@ -13,6 +13,13 @@ function makeHash () { return Object.create(null) } +/** + * trim for map + */ +function trim (str) { + return str.trim() +} + var utils = module.exports = { hash: makeHash, @@ -47,6 +54,15 @@ var utils = module.exports = { }) }, + /** + * split a transition class string into array + */ + split: function (classString) { + if (classString) { + return classString.split(',').map(trim) + } + }, + /** * Accurate type check * internal use only, so no need to check for NaN diff --git a/test/functional/fixtures/transition.html b/test/functional/fixtures/transition.html index 9f1f8933542..7c14b83c5e1 100644 --- a/test/functional/fixtures/transition.html +++ b/test/functional/fixtures/transition.html @@ -17,13 +17,19 @@ -moz-transition: all .2s ease; -webkit-transition: all .2s ease; } - .test.shrink { + .test.enter, .test.leave { height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; } + .test.enter { + background-color: #00f; + } + .test.leave { + background-color: #0f0; + } @@ -40,7 +46,7 @@ class="test" sd-repeat="item:items" sd-if="filter(item)" - sd-transition-class="shrink" + sd-transition-class="enter, leave" sd-attr="data-id:item.a"> {{item.a}} @@ -48,7 +54,7 @@ class="test" sd-repeat="item:items" sd-show="filter(item)" - sd-transition-class="shrink" + sd-transition-class="enter, leave" sd-attr="data-id:item.a"> {{item.a}} diff --git a/test/functional/specs/transition.js b/test/functional/specs/transition.js index a0478db85cf..fbb12baeb12 100644 --- a/test/functional/specs/transition.js +++ b/test/functional/specs/transition.js @@ -16,17 +16,17 @@ casper.test.begin('Transition', 23, function (test) { .thenClick('.button-1') .wait(minWait, function () { test.assertElementCount('.test', 4) - test.assertElementCount('.test.shrink', 2) + test.assertElementCount('.test.leave', 2) }) .wait(transDuration, function () { test.assertElementCount('.test', 3) - test.assertElementCount('.test.shrink', 0) + test.assertElementCount('.test.leave', 0) test.assertNotVisible('.test[data-id="1"]') }) .thenClick('.button-2') .wait(minWait, function () { test.assertElementCount('.test', 3) - test.assertElementCount('.test.shrink', 2) + test.assertElementCount('.test.leave', 2) }) .wait(transDuration, function () { test.assertElementCount('.test', 2) @@ -41,7 +41,7 @@ casper.test.begin('Transition', 23, function (test) { .thenClick('.pop') .wait(minWait, function () { test.assertElementCount('.test', 4) - test.assertElementCount('.test.shrink', 2) + test.assertElementCount('.test.leave', 2) }) .wait(transDuration, function () { test.assertElementCount('.test', 2) diff --git a/test/unit/specs/transition.js b/test/unit/specs/transition.js index 32e0b8c2b1f..f205164dce0 100644 --- a/test/unit/specs/transition.js +++ b/test/unit/specs/transition.js @@ -43,7 +43,7 @@ describe('UNIT: Transition', function () { var el = mockEl('css'), c = mockChange(function () { c.called = true - assert.ok(el.classList.contains('test')) + assert.ok(el.classList.contains('enter')) }), code, cbCalled = false @@ -65,7 +65,7 @@ describe('UNIT: Transition', function () { }) it('should remove the class afterwards', function () { - assert.notOk(el.classList.contains('test')) + assert.notOk(el.classList.contains('enter')) }) it('should return correct code', function () { @@ -85,7 +85,7 @@ describe('UNIT: Transition', function () { }) it('should add the class', function () { - assert.ok(el.classList.contains('test')) + assert.ok(el.classList.contains('leave')) }) it('should call changeState on transitionend', function () { @@ -102,7 +102,7 @@ describe('UNIT: Transition', function () { }) it('should remove the class after called', function () { - assert.notOk(el.classList.contains('test')) + assert.notOk(el.classList.contains('leave')) }) it('should return correct code', function () { @@ -215,7 +215,7 @@ describe('UNIT: Transition', function () { function mockEl (type) { var el = document.createElement('div') if (type === 'css') { - el.sd_trans_class = 'test' + el.sd_trans_class = ['enter', 'leave'] } else if (type === 'js') { el.sd_trans = 'test' }