JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<script src="https://raw.github.com/Modernizr/Modernizr/master/modernizr.js"></script>
<header><p>Hover over the headlines to get a "link-to-section" link</p></header>


<button id="add-element">Add element</button>

<div id="cloneme" style="display:none;">
    <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
    <button class="remove-container">remove</button>
</div>


<footer>
    <h3>using</h3>
    <ul>
        <li><a href="http://www.jquery.com">jQuery 1.7</a></li>
        <li><a href="http://www.modernizr.com">Modernizr</a></li>
        <li><a href="http://leaverou.github.com/prefixfree/">-prefix-free</a></li>
    </ul>
</footer>

CSS

body {
    padding: 40px;
}

footer > p {
    color: #FFF;
    background: #333;
    padding: 20px 40px;
    margin: -20px -40px 20px -40px;
}

* {
    -webkit-transform: scaleY(1);
       -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
         -o-transform: scaleY(1);
            transform: scaleY(1);
}

.withStyle {
    -webkit-transition: 
        visibility 0.25s,
        opacity 0.25s,
        -webkit-transform 0.25s;
    -moz-transition:
        visibility 0.25s,
        opacity 0.25s,
        -moz-transform 0.25s;
    -ms-transition:
        visibility 0.25s,
        opacity 0.25s,
        -ms-transform 0.25s;
    -o-transition:
        visibility 0.25s,
        opacity 0.25s,
        -o-transform 0.25s;
    transition:
        visibility 0.25s,
        opacity 0.25s,
        transform 0.25s;
}

.withStyle-hidden-default {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scaleY(0);
       -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
         -o-transform: scaleY(0);
            transform: scaleY(0);
}

JavaScript

(function($, undefined){
    // determine transitionEnd event name, undefined if not supported
    var transitionEnd = {
            'WebkitTransition' : 'webkitTransitionEnd',
            'MozTransition' : 'transitionend',
            'OTransition' : 'oTransitionEnd',
            'msTransition' : 'msTransitionEnd', // maybe?
            'transition' : 'transitionEnd'
        }[Modernizr.prefixed('transition')];

    // asd
        
    if (transitionEnd) {
        $(function() {
            $(document.body).on(transitionEnd, '.withStyle-remove', function(e) {
                $(this).remove();
            });
        });
        
        $.fn.showWithStyle = function(style) {
            style || (style = "default");
            var cn = "withStyle-hidden-" + style;
            // add class with style to start transition from
            this.addClass(cn + " withStyle");
            // force a reflow
            this.css('top');
            // remove class with styles to trigger transition
            this.removeClass(cn);
            return this;
        };
        
        $.fn.removeWithStyle = function(style) {
            style || (style = "default");
            var cn = "withStyle-hidden-" + style;
            // trigger transition
            this.addClass(cn + " withStyle-remove withStyle");
        };
    } else {
        // fallback to fadeIn and fadeOut
    }
    
    
    
    
    $(function(){
        
        $('#add-element').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            $('#cloneme').clone()
                .attr('id', '')
                .css('display', 'block')
                .insertAfter(this)
                .showWithStyle();
        });
        
        $(document.body).on('click', '.remove-container', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).parent().removeWithStyle();
        });
        
    });
    
})(jQuery);