transition class can take format of "enter,leave"

vuejs · Nov 15, 2013 · a7d184e · a7d184e
1 parent 9dc45ea
commit a7d184e
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 16 deletions.
diff --git 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
@@ -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
@@ -54,18 +54,21 @@ 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()
         return codes.CSS_SKIP
     }
 
     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
@@ -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
@@ -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;
+            }
         </style>
     </head>
     <body>
@@ -40,15 +46,15 @@
                 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}}
             </div>
             <div
                 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}}
             </div>

diff --git 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
@@ -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'
         }