JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="wrapper">
    <button class="add">add a div element</button>
</div>

CSS

@-moz-keyframes added {
    0% {
        color: #fff;
    }
}
@-ms-keyframes added {
    0% {
        color: #fff;
    }
}
@-o-keyframes added {
    0% {
        color: #fff;
    }
}
@-webkit-keyframes added {
    0% {
        color: #fff;
    }
}
@keyframes added {
    0% {
        color: #fff;
    }
}

div {
    color: #000;
    -moz-animation: added 0.01s linear;
    -moz-animation-iteration-count: 1;
    -ms-animation: added 0.01s linear;
    -ms-animation-iteration-count: 1;
    -o-animation: added 0.01s linear;
    -o-animation-iteration-count: 1;
    -webkit-animation: added 0.01s linear;
    -webkit-animation-iteration-count: 1;
    animation: added 0.01s linear;
    animation-iteration-count: 1;
}

JavaScript

$('.add').click(function(){
    $('<div />',{text: 'new div!'}).appendTo($(this).parent());
});

$(document).on('webkitAnimationEnd animationend MSAnimationEnd oanimationend', function(e){
    var eTarget = e.target;
    console.log(eTarget.tagName.toLowerCase() + ' added to ' + eTarget.parentNode.tagName.toLowerCase());
    $(eTarget).draggable();
});