xuijs · douglashipolito · Mar 28, 2014 · Mar 28, 2014 · Mar 28, 2014 · Mar 28, 2014
diff --git a/dom-node-appear/README.md b/dom-node-appear/README.md
@@ -0,0 +1,12 @@
+DOMNodeAppear - .appears
+-------------
+It's a version of [DOMNodeAppear]() for xuijs. It will be useful when you don't need jquery or don't want to include it.
+
+IMPORTANT!
+
+It doesn't work with ".find" method, only with `x$('selector')`.
+
+For more informations about this:
+
+* [DOMNodeAppear](https://github.com/liamdanger/jQuery.DOMNodeAppear)
+* [Back Alley Coder](http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/)
diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js
@@ -0,0 +1,78 @@
+xui.extend({
+  /**
+  * 
+  * This executes a callback only when the element appears on the DOM
+  * 
+  * @param {Function} callback Function that will be called when the element appears on the DOM. 
+  * @return self
+  * @example
+  * 
+  * ### DOMNodeAppear 
+  *  
+  * syntax:
+  *
+  *    DOMNodeAppear(callback);
+  * 
+  * example: 
+  * 
+  *    x$('#node').DOMNodeAppear(function () {
+  *      //do something
+  *    });
+  * 
+  */
+  DOMNodeAppear: function(callback) {    
+    var self = this,
+        head = x$('head'),
+
+        //Options of animation
+        options = {
+          keyframes: "@keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-moz-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-webkit-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-ms-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-o-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } }, ",
+          selector: self.selector,
+          stylesClass: self.selector.replace(".", ""),
+          styles: self.selector + " { animation-name: nodeInserted; -webkit-animation-name: nodeInserted; animation-duration: 0.001s; -webkit-animation-duration: 0.001s; }"
+        },
+
+        //list of events
+        events = 'animationstart webkitAnimationStart oanimationstart MSAnimationStart'.split(' '),
+
+        //Callback of dom node appear
+        animationStart = function (event) {
+          var target = x$(event.target),
+          targetSelector = x$(options.selector);
+
+          targetSelector = targetSelector[targetSelector.length -1];
+
+          if ((event.animationName === 'nodeInserted' && target[0] === targetSelector) && typeof callback === 'function') {
+            callback.call(target[0], target);
+          }
+        };
+
+    //if the keyframes aren't present, add them in a style element
+    if(!x$("style.domnodeappear-keyframes").length) {
+      head.bottom("<style class='domnodeappear-keyframes'>" + options.keyframes + "</style>");
+    }
+
+    //add animation to selected element
+    head.bottom("<style class=\"" + options.stylesClass + "-animation\">" + options.styles + "</style>")
+
+    //Attaches events to the document
+    events.forEach(function (eventString) {
+      x$(document).on(eventString, animationStart);
+    });
+
+    return this;
+  }
+});
+
+//It just exists to get the selector
+//It saves the reference of the xui and replaces the main "find" in order to save the selector
+(function (window) {
+  var _xui = xui;
+
+  window.x$ = window.xui = xui = function(q, context) {
+    var _Xui = _xui.apply(this, arguments);
+
+    _Xui.selector = q;
+    return _Xui;
+  };
+}(window));
diff --git a/dom-node-appear/example.html b/dom-node-appear/example.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Dom Node Appear - XUIJS</title>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/xuijs/2.3.2/xui.min.js"></script>
+    <script src="dom-node-appear.js"></script>
+
+    <style>
+      #container {
+        margin: 10px auto;
+        width: 90%;
+      }
+      .node {
+        -webkit-transition: color 0.5s ease-out;
+        -moz-transition: color 0.5s ease-out;
+        -o-transition: color 0.5s ease-out;
+        transition: color 0.5s ease-out;
+        color: #fff;
+      }
+      .new-element {
+        color: #DF0000;
+      }
+      p {
+        border: 3px solid #D5CFCF;
+        padding: 10px;
+        width: 50%;
+        color: #555555;
+      }
+      button {
+        border: none;
+        padding: 20px;
+        background-color: #000;
+        color: #fff;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <button id="add-node">Add new element</button>
+      <p id="events-text">No new Elements</p>
+      <div id="nodes"></div>
+    </div>
+
+    <script>
+      var container = x$('#container'),
+          nodes = x$('#nodes'),
+          addNode = x$('#add-node'),
+          eventsText = x$('#events-text'),
+          countNodes = 0;
+
+      setInterval(function () {
+        addNode.fire('click');
+      }, 2000);
+
+      addNode.on('click', function () {
+        nodes.bottom('<div class="node">[NEW NODE]</div>');
+        countNodes++;
+      });
+
+      x$('.node').DOMNodeAppear(function (node) {
+        var prev = x$(node[0].previousSibling);
+
+        node.addClass('new-element node-index-' + countNodes);
+        prev.remove();
+        eventsText.html('New node number ' + countNodes + '!');
+      });
+    </script>
+  </body>
+</html>