JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<button id="add">Add more content</button>
<div id="holder"></div>

CSS

@-webkit-keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#holder div {
    /* Firefox */
    -moz-animation: newContentAdded;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 0.1s;
    /* Chrome, Chromium, Webkit (future-opera?) */
    -webkit-animation: newContentAdded;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.1s;
}

JavaScript

$('#holder').on('webkitAnimationEnd animationend', 'div', function(e){
    console.log(e.target.tagName.toLowerCase() + ' added!');
});

$('#add').click(function(){
    var addTo = $('#holder');
    $('<div />', {text: addTo.children().length})
    .appendTo(addTo);
});