JS Boilerplate

by kyllle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<div class="view tt  js-view">
    
    <div class="alert tt is-hidden js-alert"></div>
</div>


<button class="js-action--dispose">Dispose</button>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

.view {
    background: #eee;
    height: 400px;
    border-radius: 4px;
}

.alert {
    width: 100%;
    height: 40px;
    background: lightGreen;
    border-radius: 4px;
    position: relative;
    
    &:before {
        content: 'Success';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

button {
    background: #0195e7;
    border: none;
    border-radius: 4px;
    color: white;
    width: 100px;
    height: 40px;
    margin-top: 16px;
}

.tt {
    opacity: 1;
    visibility: visible;
    transition: visibility 0s linear,
                opacity 1500ms linear;

    &.is-hidden {
        opacity: 0;
        visibility: hidden;
        transition-delay: 1500ms, 0ms;
    }
}

JavaScript

console.clear();


$('.js-action--dispose').on('click', function(event) {

	event.preventDefault();
    
    var deferred = $.Deferred();
    
    $('.js-alert').removeClass('is-hidden').on('transitionend', function() {
    	deferred.resolve();
    });
    
    $.when(deferred).promise().done(function() {
    	$('.js-view').addClass('is-hidden').one('transitionend', function(event) {
            if(event.originalEvent.propertyName === 'opacity') {

                $('.js-view').remove();

            }
        });
    });
});