transition effects in html with handlebars

I’ve built an app where I browse instagram API and fetch photos. After that is done I use Handlebars to make a template with undordered list and images inside. I’m trying to get images to slowly fade in as soon as the template is loaded, but to no avail. So far it looks like this

In my template I add class hidden that sets the opacity to 0, so then I can just remove the class to show the image.

<template id="image-template" type="text/x-handlebars-template">
    <ul>
        {{#each this}}          
            <li>
                <img class="hidden" src="{{url}}">
            </li>
        {{/each}}
    </ul>       
</template> 

After setting everything in JS

var template = Handlebars.compile( source.html() )
var html = template( images )
$('#container').html( html )

At this point I should have the images in the container, so I should be able to use

$('img').removeClass('hidden')

and have images slowly fade in, however thats not happening.
After a bit of investigating I realised that those images aren’t quite available for me, so I set up a pub/sub after adding template to html

$('#container').html(html)
$.publish('insta/photoTransition')

I was sure that calling another function after this would work, but still no result. After that just out of ideas I setTimeout before publishing, and what do you know, my assumptions were true and with a delay it finally worked. However I don’t want to wait a set amount of time to show the photos, I would like to show them as soon as possible. Before I try to figure out how deferreds work to try my last idea, are there any better ways to solve my problem?


Source: javascript

Leave a Reply