SentinelJS Demo

by tnhu

HTML

<script src="https://cdn.rawgit.com/muicss/sentineljs/f6895dcc/dist/sentinel.js"></script>
<button onclick="addDiv();">Add another DIV</button>
<div class="my-div"></div>

CSS

.my-div {
  animation-duration: .5s;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript

// use the `sentinel` global object
sentinel.on('.my-div', function(el) {
  el.innerHTML = 'The sentinel is always watching.';
}, 'slidein');

// add a new div to the DOM
function addDiv() {
  var newEl = document.createElement('div');
  newEl.className = 'my-div';
  document.body.appendChild(newEl);
}

// make addDiv global (for JSFiddle)
window.addDiv = addDiv;