Animated feedback comments

by jorgeluis

HTML

<div class="bubble" data-response="OK, show me another">
    This is an animated chat bubble! Hiya!
</div>

<div class="bubble warning" data-response="one more?">
    This is my second comment
</div>

<div class="bubble" data-response="ok, thanks">
    So that's 3 responses
</div>

<div class="bubble" data-response="Bye!">
    kbye
</div>



<button>
Hello?
</button>

CSS

.bubble {
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    padding: 1em;
    margin: 0 0 0.5em;
    position: relative;
    background: rgba(0, 0, 80, 0.033);
    color: #777;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);

    -webkit-transition: opacity 400ms ease-in, transform 160ms ease-in;
    transition: opacity 400ms ease-in, transform 160ms ease-in;
}
.warning {
    background-color: tomato;
    color: #fff;
}
.bubble.show {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}


button {
    background: #333;
    border: 0;
    font-family: sans-serif;
    font-size: 1.1em;
    color: #fff;
    padding: 1em;
}

JavaScript

var bubbles = document.querySelectorAll('.bubble');

var btn = document.querySelector('button');
var i = 0;

btn.addEventListener('click', function() {
  bubbles[i].classList.add('show');
  i++;
});

for( j=0; j < bubbles.length; j++ ) {
    bubbles[j].addEventListener('transitionend', function(event) {
      btn.innerHTML = this.dataset.response;
    }, false);
}