Develop Reference

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?

Just use css transitions.
#image-template img{
opacity: 1;
transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#image-template img.hidden{
opacity: 0;
}

CSS3 Transitions happen instantly?

I have an element called #artwork which needs to be animated:
#artwork{
-webkit-transition: all 20s ease-in;
transition:all 20s ease-in;
width:75%;
display:block;
margin:0px auto;
}
#artwork.trans{
width:60%;
}
The problem is, the transition happens instantly without any delay (in my case 20s). I have tried Jquery's toggleClass function to no avail and I also tried the css function which also didn't work.
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});

The element needs to be drawn on the page before it can be transitioned. If you add an element it's a good rule of thumb to give 10-100ms for the initial state to render before changing it's styles.
You may also want to consider using an animation instead, which you can do without the delay.
Here's an animation I've used to move something into the page from the right, feel free to modify it to suit your needs.
.some_class{
-webkit-animation: myanimation 500ms ease-in-out;
-moz-animation: myanimation 500ms ease-in-out;
animation: myanimation 500ms ease-in-out;
}
#-webkit-keyframes myanimation {
0% { left: 200%; }
100% { left: 0%; }
}
#keyframes myanimation {
0% { left: 200%; }
100% { left: 0%;}
}

You can't switch from display:none to display:block in a transition. This is why your animations are happening instantly.
Including the display change in the transition tells CSS to snap to position.
You need to switch display to block, then wait a frame, then apply your other new properties for them to animate. This is why when you change the values in the inspector they animate.
Here's a codepen showing an example of the above http://codepen.io/gunderson/pen/emyReW

When using the transition shorthand property, the delay is placed at the end. In your code, your transition will last 20s with no delay.
If you want it to be delayed by 20s, it should be written like this:
transition:all 2s ease-in 20s;
EDIT
Here is a demo

As Michael's answer above, the image need to be drawn before any animation taking effect.
Let's take a look at your code:
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
After the append function is called, the image begins to load. At this time, the browser will proceed other functions css or toggleClass below the append. Which is why you will never see your image animated.
To fix this, you need to put your append image code into another function, and animation code into another function, like this:
$(window).load(function(){
var addImage = function(background){
appendImage(background);
animateImage();
};
var appendImage = function(background) {
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
};
var animateImage = function() {
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
In this code, the addImage function will call two external functions, which will happen sequentially. By doing this, the animateImage will be called right after the appendImage function is finished.
This is the demo on Codepen.
Hope this helps.

hide/unhide HTML portions by hovering?

more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere.
as an example, go to http://www.tsunamitsolutions.com/
my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.
In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?

It can be done in the CSS.
Assuming the dots/arrows are child elements of banner container, you can do something like:
.bannerContainerClass .dotClass {
display: none;
}
.bannerContainerClass:hover .dotClass {
display: block;
}
You can also do it in jQuery if you need effects like fade:
$(".bannerContainerClass").hover(function() {
$(this).children(".dotClass").fadeIn(500);
}, function() {
$(this).children(".dotClass").fadeOut(500);
});
The jQuery method can be modified to work even if the dots aren't children of banner container.

You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points.
Suppose.
<div id="header_image">
..code for header image..
</div>
which is header tag. and there is a tag which cointains the points.
<div id="points_container">
..code for points...
</div>
Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.
$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});

You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:
.dots:hover
{
opacity:0;
}
Makes anything with the dots class invisible on mouse over.
Or if you don't want it to take up any space when invisible:
.dots:hover
{
display:none;
}

Try this with simple CSS transitions, like this
HTML
<div id="parent"><br/><span class="bullets">* * * *</span></div>
CSS
.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
FIDDLE HERE>>

Animate opacity on image load

I have tried a bunch of different solutions to similar problems on here but none of them seem to be doing anything for me. See my jsFiddle to see an example of what I would like to happen: http://jsfiddle.net/Amp3rsand/HSNY5/6/
It animates how I would like but it relies on .delay when I would prefer it to fire as soon as the image is finished loading. The commented out sections in the js are the things that I have tried.
Could the problem be that the image is actually the background of a div rather than its own element? I tested making it its own <img> tag as well but it didn't seem to make a difference. I have the image as the background so that when I use media queries it is easy to swap in a different, smaller image for mobile users or small screens.
HTML:
<header></header>
<div id="image">
<div id="blah"></div>
</div>
The image I would like to fire after it finishes loading is the background of '#image'. Then I would like for it to animate to 'opacity:1;' while '#blah' and 'header' are animated into place.
Here is the jQuery I'm using right now but it is not correct:
$('#image').hide().delay(800).fadeTo(600, 1);
$('#blah').css("left", "-650px").delay(1400).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(2000).animate({top:'-5px'},400);
On my website it is quite a large image so it takes about half a second to load but this code doesn't take into account caching or different network speeds.
What am I doing wrong or what should I do differently?
Thanks everyone
EDIT:
I gave the imagesLoaded plugin a go earlier and it seems to work on my website but I can't tell if it is actually doing what I want or just emulating my code from above.
$(document).ready(function() {
$('body').hide().fadeTo(500, 1)
});
imagesLoaded( document.querySelector('#homeimg'), function( instance ) {
$('article').hide().fadeTo(600, 1);
$('#caption').css("left", "-650px").delay(800).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(1400).animate({top:'-5px'},400);
});
'#homeimg' being the div with the image as the background and 'article' being the container for '#homeimg' and '#caption'
I can only test with the website loaded locally at the moment so I can't simulate a slow connection. Does the code above do what I am looking for? Sorry if it should be obvious

Your image is loaded via a CSS background property, you will not be able to detect the loading of that. Why not use <img> tag for images?
If you use <img> you can read this question: Browser-independent way to detect when image has been loaded for a bullet-proof solution.
If you insist on using a background CSS property you will need to implement a way of sending your image as a data url encoded as base64 as described in this answer: https://stackoverflow.com/a/13989806/2788

Try animate
$('#image').animate({ opacity: '1'}, 600);

You can set the initial opacity to 0, and when the image onloaded, set the opacity to 1. With CSS you can make a transition between the two states:
<style>
.easeload{
opacity: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
}
</style>
<img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">

Order CSS Styles with Transitions and JavaScript

if i apply a style to an element and immdiatily afterwards add css transition styles, the transition is applied to the style preceeding. this might not always be the intention.
i found a solution by using settimeout (0), is there any cleaner/more correct approach known ?
http://jsfiddle.net/nicib83/XP9E7/
$("div").css("opacity", 1);
$("div").css("-webkit-transition", "all 0.35s");
/* Works
window.setTimeout(function () {
$("div").css("-webkit-transition", "all 0.35s");
}, 0);
*/
best regards
Edit:
i didn't mean how best to set css styling but how to sequentially set styles when the first style should be applied without the second being active at that time but only afterwards, i wan to add transition afterwards. settimeout fixes it, best solution ?

It's much better to pre-define a class that contains both of the properties you want to apply, and add that class programmatically to the element. Both of the properties will be applied together.
.myClass {
opacity: 1;
-webkit-transition: all 0.35s;
}
$("div").addClass("myClass");

You could take a page from the book of Twitter Bootstrap:
fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition:opacity 0.15s linear;
-o-transition:opacity 0.15s linear;
transition:opacity 0.15s linear;
}
.fade.in{
opacity:1;
}
then programatically add the .in class when you want it to fade in:
$("div").addClass("in");
with your original div looking something like:
<div class="fade">Box</div>

I've been running up against this myself and also found the setTimeout solution. After some research the issue is how the browser handles scheduling. The JavaScript runs in its own thread separate from the threads dealing with the UI and the DOM (which is why issues like UI blocking happen).
In cases like this both JavaScript statements run before the document registers the first change and it ends up applying both classes at the same time. setTimeout(fn,0) effectively makes the function asynchronous and shunts the functions to run at the next available opportunity. This allows the UI thread to catch up before the next class is added.