transition classes now defaults to sd-enter and sd-leave, also configurable.

Author: Evan You

src/compiler.js

@@ -200,9 +200,7 @@ CompilerProto.compile = function (node, root) {
         // special attributes to check
         var repeatExp,
             componentId,
-            partialId,
-            transId,
-            transClass
+            partialId
 
         // It is important that we access these attributes
         // procedurally because the order matters.
@@ -238,12 +236,12 @@ CompilerProto.compile = function (node, root) {
             }
 
         } else {
-            
-            partialId   = utils.attr(node, 'partial')
-            transId     = utils.attr(node, 'transition')
-            transClass  = utils.attr(node, 'transition-class')
 
+            // check transition property
+            node.sd_trans = utils.attr(node, 'transition')
+            
             // replace innerHTML with partial
+            partialId = utils.attr(node, 'partial')
             if (partialId) {
                 var partial = compiler.getOption('partials', partialId)
                 if (partial) {
@@ -252,16 +250,6 @@ CompilerProto.compile = function (node, root) {
                 }
             }
 
-            // Javascript transition
-            if (transId) {
-                node.sd_trans = transId
-            }
-
-            // CSS class transition
-            if (transClass) {
-                node.sd_trans_class = utils.split(transClass)
-            }
-
             // finally, only normal directives left!
             compiler.compileNode(node)
         }

src/config.js

@@ -3,6 +3,8 @@ module.exports = {
     prefix      : 'sd',
     debug       : false,
     silent      : false,
+    enterClass  : 'sd-enter',
+    leaveClass  : 'sd-leave',
     attrs       : {}
 
 }

src/directives/repeat.js

@@ -1,6 +1,7 @@
 var Observer   = require('../observer'),
     Emitter    = require('../emitter'),
     utils      = require('../utils'),
+    config     = require('../config'),
     transition = require('../transition'),
     ViewModel // lazy def to avoid circular dependency
 
@@ -95,9 +96,7 @@ module.exports = {
         self.ChildVM    = self.compiler.getOption('components', componentId) || ViewModel
 
         // extract transition information
-        self.trans      = utils.attr(el, 'transition')
-        self.transClass = utils.attr(el, 'transition-class')
-        self.hasTrans   = self.trans || self.transClass
+        self.hasTrans   = el.hasAttribute(config.attrs.transition)
 
         // create a comment node as a reference node for DOM insertions
         self.ref = document.createComment('sd-repeat-' + self.arg)
@@ -157,10 +156,6 @@ module.exports = {
             scope   = {},
             ref, item
 
-        // add transition info
-        node.sd_trans = this.trans
-        node.sd_trans_class = utils.split(this.transClass)
-
         // append node into DOM first
         // so sd-if can get access to parentNode
         if (data) {

src/main.js

@@ -138,8 +138,7 @@ var specialAttributes = [
     'repeat',
     'partial',
     'component',
-    'transition',
-    'transition-class'
+    'transition'
 ]
 
 function updatePrefix () {

src/transition.js

@@ -1,5 +1,9 @@
-var endEvent = sniffTransitionEndEvent(),
-    codes    = {
+var endEvent   = sniffTransitionEndEvent(),
+    config     = require('./config'),
+    enterClass = config.enterClass,
+    leaveClass = config.leaveClass,
+    // exit codes for testing
+    codes = {
         CSS_E     : 1,
         CSS_L     : 2,
         JS_E      : 3,
@@ -24,23 +28,21 @@ var transition = module.exports = function (el, stage, changeState, compiler) {
         return codes.INIT
     }
 
-    var transitionFunctionId = el.sd_trans,
-        transitionClass = el.sd_trans_class
+    var transitionId = el.sd_trans
 
-    if (transitionFunctionId) {
+    if (transitionId) {
         return applyTransitionFunctions(
             el,
             stage,
             changeState,
-            transitionFunctionId,
+            transitionId,
             compiler
         )
-    } else if (transitionClass) {
+    } else if (transitionId === '') {
         return applyTransitionClass(
             el,
             stage,
-            changeState,
-            transitionClass
+            changeState
         )
     } else {
         changeState()
@@ -54,51 +56,46 @@ transition.codes = codes
 /**
  *  Togggle a CSS class to trigger transition
  */
-function applyTransitionClass (el, stage, changeState, classes) {
+function applyTransitionClass (el, stage, changeState) {
 
     if (!endEvent) {
         changeState()
         return codes.CSS_SKIP
     }
 
     var classList         = el.classList,
-        lastLeaveCallback = el.sd_trans_cb,
-        className
+        lastLeaveCallback = el.sd_trans_cb
 
     if (stage > 0) { // enter
 
-        className = classes[0]
-
         // cancel unfinished leave transition
         if (lastLeaveCallback) {
             el.removeEventListener(endEvent, lastLeaveCallback)
             el.sd_trans_cb = null
         }
 
         // set to hidden state before appending
-        classList.add(className)
+        classList.add(enterClass)
         // append
         changeState()
         // force a layout so transition can be triggered
         /* jshint unused: false */
         var forceLayout = el.clientHeight
         // trigger transition
-        classList.remove(className)
+        classList.remove(enterClass)
         return codes.CSS_E
 
     } else { // leave
 
-        className = classes[classes.length > 1 ? 1 : 0]
-
         // trigger hide transition
-        classList.add(className)
+        classList.add(leaveClass)
         var onEnd = function (e) {
             if (e.target === el) {
                 el.removeEventListener(endEvent, onEnd)
                 el.sd_trans_cb = null
                 // actually remove node here
                 changeState()
-                classList.remove(className)
+                classList.remove(leaveClass)
             }
         }
         // attach transition end listener

src/utils.js

@@ -13,13 +13,6 @@ function makeHash () {
     return Object.create(null)
 }
 
-/**
- *  trim for map
- */
-function trim (str) {
-    return str.trim()
-}
-
 var utils = module.exports = {
 
     hash: makeHash,
@@ -36,7 +29,7 @@ var utils = module.exports = {
     attr: function (el, type) {
         var attr = attrs[type],
             val = el.getAttribute(attr)
-        if (val) el.removeAttribute(attr)
+        if (val !== null) el.removeAttribute(attr)
         return val
     },
 
@@ -54,15 +47,6 @@ 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

test/functional/fixtures/transition.html

@@ -13,21 +13,21 @@
                 padding: 10px;
                 border: 1px solid #000;
                 overflow: hidden;
-                transition: all .2s ease;
+                transition: all 1s ease;
                 -moz-transition: all .2s ease;
                 -webkit-transition: all .2s ease;
             }
-            .test.enter, .test.leave {
+            .sd-enter, .sd-leave {
                 height: 0;
                 padding-top: 0;
                 padding-bottom: 0;
                 border-top-width: 0;
                 border-bottom-width: 0;
             }
-            .test.enter {
+            .sd-enter {
                 background-color: #00f;
             }
-            .test.leave {
+            .sd-leave {
                 background-color: #0f0;
             }
         </style>
@@ -46,15 +46,15 @@
                 class="test"
                 sd-repeat="item:items"
                 sd-if="filter(item)"
-                sd-transition-class="enter, leave"
+                sd-transition
                 sd-attr="data-id:item.a">
                 {{item.a}}
             </div>
             <div
                 class="test"
                 sd-repeat="item:items"
                 sd-show="filter(item)"
-                sd-transition-class="enter, leave"
+                sd-transition
                 sd-attr="data-id:item.a">
                 {{item.a}}
             </div>

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.leave', 2)
+        test.assertElementCount('.test.sd-leave', 2)
     })
     .wait(transDuration, function () {
         test.assertElementCount('.test', 3)
-        test.assertElementCount('.test.leave', 0)
+        test.assertElementCount('.test.sd-leave', 0)
         test.assertNotVisible('.test[data-id="1"]')
     })
     .thenClick('.button-2')
     .wait(minWait, function () {
         test.assertElementCount('.test', 3)
-        test.assertElementCount('.test.leave', 2)
+        test.assertElementCount('.test.sd-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.leave', 2)
+        test.assertElementCount('.test.sd-leave', 2)
     })
     .wait(transDuration, function () {
         test.assertElementCount('.test', 2)

test/unit/specs/transition.js

@@ -1,8 +1,11 @@
 describe('UNIT: Transition', function () {
 
     var transition = require('seed/src/transition'),
+        config     = require('seed/src/config'),
         codes      = transition.codes,
-        endEvent   = sniffTransitionEndEvent()
+        endEvent   = sniffTransitionEndEvent(),
+        enterClass = config.enterClass,
+        leaveClass = config.leaveClass
 
     describe('General', function () {
 
@@ -43,7 +46,7 @@ describe('UNIT: Transition', function () {
             var el = mockEl('css'),
                 c = mockChange(function () {
                     c.called = true
-                    assert.ok(el.classList.contains('enter'))
+                    assert.ok(el.classList.contains(enterClass))
                 }),
                 code,
                 cbCalled = false
@@ -65,7 +68,7 @@ describe('UNIT: Transition', function () {
             })
 
             it('should remove the class afterwards', function () {
-                assert.notOk(el.classList.contains('enter'))
+                assert.notOk(el.classList.contains(enterClass))
             })
 
             it('should return correct code', function () {
@@ -85,7 +88,7 @@ describe('UNIT: Transition', function () {
             })
 
             it('should add the class', function () {
-                assert.ok(el.classList.contains('leave'))
+                assert.ok(el.classList.contains(leaveClass))
             })
 
             it('should call changeState on transitionend', function () {
@@ -102,7 +105,7 @@ describe('UNIT: Transition', function () {
             })
 
             it('should remove the class after called', function () {
-                assert.notOk(el.classList.contains('leave'))
+                assert.notOk(el.classList.contains(leaveClass))
             })
 
             it('should return correct code', function () {
@@ -215,7 +218,7 @@ describe('UNIT: Transition', function () {
     function mockEl (type) {
         var el = document.createElement('div')
         if (type === 'css') {
-            el.sd_trans_class = ['enter', 'leave']
+            el.sd_trans = ''
         } else if (type === 'js') {
             el.sd_trans = 'test'
         }