Transition works half way: the ugly jump - css

Question

I'm trying to get "transition" to work correctly when I add and remove a class but I have not succeeded.
Here's what I've done, which I think will help you understand my problem better:
http://jsfiddle.net/88mzjnec/9/
CSS CODE:
.navbar-brand > img{
max-height: 70px;
height:70px;
margin-top: -28px;
-webkit-transition: max-height 0.5s, width 0.5s, margin-top 0.5s;
-moz-transition: max-height 0.5s, width 0.5s, margin-top 0.5s;
-o-transition: max-height 0.5s, width 0.5s, margin-top 0.5s;
transition: max-height 0.5s, width 0.5s, margin-top 0.5s;
}
HTML CODE:
<div id="primary" class="ancho">
<a class="navbar-brand" href="http://www.imagenestotal.com/perrito/perrito-4.jpg">
<img src="http://www.imagenestotal.com/perrito/perrito-4.jpg" height="70" title="BLA BLA BLA" rel="home"></a>
</div>
<button onclick="removeAdd()">Add/remove class</button><div id="result"></div>
JAVASCRIPT CODE:
var add = true;
var result = document.getElementById("result");
function removeAdd(){
if(add){
$("#primary").removeClass("ancho");
add = false;
result.innerText = "¡Oh, no! The ugly jump.";
}else{
$("#primary").addClass("ancho");
add = true;
result.innerText = "All OK";
}
}
If someone could take a look and throw some light, I'd appreciate it...
Thanks,

Answer 1

In your CSS transitions, change the references from 'width' to 'height', as that's what you're actually animating.
That solves the main problem. I also suggest a few coding changes: 1. Removing the max-height lines (as they don't do anything since you've already fixed the height), 2. Since you're already using jQuery in one line, use it in your other lines where applicable to simplify things (you can use it to fix your broken "result" too), 3. Remove the 'onclick' attribute from the HTML and apply it via JS, so everything JS is only handled by JS, keep your scripting separate from your content and making things easier to maintain.
JS:
function removeAdd(){
if($("#primary").hasClass("ancho")){
$("#primary").removeClass("ancho");
$("#result").text("¡Oh, no! The ugly jump.");
} else {
$("#primary").addClass("ancho");
$("#result").text("All OK");
}
}
$(document).ready(function(){
$('#btn').click(removeAdd);
});
CSS:
.navbar-brand > img {
height: 70px;
margin-top: -28px;
-webkit-transition: height 0.5s, margin-top 0.5s;
-moz-transition: height 0.5s, margin-top 0.5s;
-o-transition: height 0.5s, margin-top 0.5s;
transition: height 0.5s, margin-top 0.5s;
}
.ancho .navbar-brand img {
height: 80px;
margin-top: -33px;
}
#result{
margin-top:20px;
}
HTML:
<div id="primary" class="ancho">
<a class="navbar-brand " href="http://www.imagenestotal.com/perrito/perrito-4.jpg">
<img src="http://www.imagenestotal.com/perrito/perrito-4.jpg" height="70" title="BLA BLA BLA" rel="home" />
</a>
</div>
<button id="btn">Add/remove class</button>
<div id="result"></div>
See it in action here: http://jsfiddle.net/88mzjnec/12/