过渡起到了一半的作用:丑陋的跳跃

Question

当我添加和删除一个类时，我试图让"transition"正常工作，但我没有成功。

以下是我所做的，我认为这将帮助你更好地理解我的问题：

http://jsfiddle.net/88mzjnec/9/

CSS代码：

.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代码：

<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代码：

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";
     }  
}

如果有人能看一眼并投一些光，我会很感激…

谢谢，

Answer 1

在CSS转换中，将引用从"width"更改为"height"，因为这就是实际设置的动画。

这解决了主要问题。我还建议对编码进行一些更改：1。删除最大高度线（因为它们没有任何作用，因为你已经固定了高度），2。既然您已经在一行中使用了jQuery，那么在适用的其他行中使用它来简化事情（您也可以使用它来修复损坏的"结果"），3。从HTML中删除"onclick"属性，并通过JS应用它，因此所有JS都只由JS处理，使脚本与内容分离，使维护更容易。

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>

请在此处查看其实际操作：http://jsfiddle.net/88mzjnec/12/