Slide In

Tying to get new news items to slide into the feed using pure CSS, with JavaScript for timing.

HTML

<div id="feed">    
    <div class="frame"></div>
    <div class="news">
        This is some tall content <br />
        This is some tall content <br />
        This is some tall content <br />
    </div>
</div>

<a href="#" class="trigger">Load new</a>

CSS

div.news {
    display: block;
    opacity: 1;
    transition: opacity .5s ease-in;
    transition-delay: 1s;
}

div.news.invisible {
    opacity: 0;
}

div.frame {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height .5s ease-out, opacity .2s linear .8s;
}

JavaScript

/*
Main problem: Elements must exisit in the DOM at page load if transitions are
to be applied to it.
*/
$(document).ready(function() {
    $("a.trigger").on("click", function() {
        var newContent = $("<div class='news'> " +
                           "This is some new content <br /> " +
                           "This is some new content <br /> " +
                           "This is some new content <br /> " +
                           "</div>");
        newContent.css({position:'absolute'});
        $("body").append(newContent);
        var estimatedHeight = newContent.height(); 
        $frame = $(".frame");
        $frame.html(newContent);
        $frame.css({height: estimatedHeight + 'px', opacity: 1});
    });
});