test implementation

component.json

@@ -19,6 +19,7 @@
         "src/text-parser.js",
         "src/deps-parser.js",
         "src/filters.js",
+        "src/transition.js",
         "src/directives/index.js",
         "src/directives/repeat.js",
         "src/directives/on.js",

src/compiler.js

@@ -195,7 +195,9 @@ CompilerProto.compile = function (node, root) {
         if (node.hasAttribute(config.preAttr)) return
         var vmId       = node.getAttribute(config.vmAttr),
             repeatExp  = node.getAttribute(config.repeatAttr),
-            partialId  = node.getAttribute(config.partialAttr)
+            partialId  = node.getAttribute(config.partialAttr),
+            transId    = node.getAttribute(config.transAttr),
+            transClass = node.getAttribute(config.transClassAttr)
         // we need to check for any possbile special directives
         // e.g. sd-repeat, sd-viewmodel & sd-partial
         if (repeatExp) { // repeat block
@@ -227,6 +229,12 @@ CompilerProto.compile = function (node, root) {
                     node.appendChild(partial.cloneNode(true))
                 }
             }
+            if (transId) {
+                // attach the transition id to node
+                // its only text so should be fine...
+                node.sd_transition = transId
+                node.removeAttribute(transitionAttr)
+            }
             // finally, only normal directives left!
             compiler.compileNode(node)
         }

src/directive.js

@@ -131,7 +131,7 @@ function parseFilter (filter, compiler) {
 DirProto.update = function (value, init) {
     if (!init && value === this.value) return
     this.value = value
-    this.apply(value)
+    this.apply(value, init)
 }
 
 /**
@@ -154,11 +154,12 @@ DirProto.refresh = function (value) {
 /**
  *  Actually invoking the _update from the directive's definition
  */
-DirProto.apply = function (value) {
+DirProto.apply = function (value, init) {
     this._update(
         this.filters
-        ? this.applyFilters(value)
-        : value
+            ? this.applyFilters(value)
+            : value,
+        init
     )
 }
 

src/directives/index.js

@@ -1,4 +1,5 @@
-var utils = require('../utils')
+var utils = require('../utils'),
+    transition = require('../transition')
 
 module.exports = {
 
@@ -27,8 +28,12 @@ module.exports = {
         }
     },
 
-    show: function (value) {
-        this.el.style.display = value ? '' : 'none'
+    show: function (value, init) {
+        var el = this.el,
+            change = function () {
+                el.style.display = value ? '' : 'none'
+            }
+        transition(el, value ? 1 : -1, change, init)
     },
 
     visible: function (value) {
@@ -53,30 +58,45 @@ module.exports = {
             this.ref = document.createComment('sd-if-' + this.key)
             this.el.sd_ref = this.ref
         },
-        update: function (value) {
-            var attached = !!this.el.parentNode
+        update: function (value, init) {
+
+            var el = this.el,
+                attached = !!el.parentNode
+
             if (!this.parent) { // the node was detached when bound
                 if (!attached) {
                     return
                 } else {
-                    this.parent = this.el.parentNode
+                    this.parent = el.parentNode
                 }
             }
+
             // should always have this.parent if we reach here
+            var parent = this.parent,
+                ref    = this.ref
+
             if (!value) {
                 if (attached) {
                     // insert the reference node
-                    var next = this.el.nextSibling
+                    var next = el.nextSibling
                     if (next) {
-                        this.parent.insertBefore(this.ref, next)
+                        parent.insertBefore(ref, next)
                     } else {
-                        this.parent.appendChild(this.ref)
+                        parent.appendChild(ref)
                     }
-                    this.parent.removeChild(this.el)
+                    transition(el, -1, remove, init)
                 }
             } else if (!attached) {
-                this.parent.insertBefore(this.el, this.ref)
-                this.parent.removeChild(this.ref)
+                transition(el, 1, insert, init)
+            }
+
+            function remove () {
+                parent.removeChild(el)  
+            }
+
+            function insert () {
+                parent.insertBefore(el, ref)
+                parent.removeChild(ref) 
             }
         },
         unbind: function () {

src/transition.js

@@ -0,0 +1,32 @@
+var endEvent = 'transitionend'
+
+/**
+ *  stage:
+ *  1 = enter
+ *  2 = leave
+ */
+module.exports = function (el, stage, changeState, init) {
+
+    var className = el.sd_transition
+    if (init || !className) {
+        return changeState()
+    }
+
+    var cl = el.classList
+
+    if (stage > 0) { // enter
+        cl.add(className)
+        changeState()
+        setTimeout(function () {
+            cl.remove(className)
+        }, 0)
+    } else { // leave
+        cl.add(className)
+        el.addEventListener(endEvent, onEnd)
+    }
+
+    function onEnd () {
+        el.removeEventListener(endEvent, onEnd)
+        changeState()
+    }
+}