Css 过渡起了一半作用：丑陋的跳跃

当我添加和删除一个类时，我试图使转换正常工作，但没有成功

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

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>

如果有人能看一看，并抛出一些光，我会很感激

---

谢谢，

在CSS转换中，将引用从“宽度”更改为“高度”，因为这是您实际制作的动画

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

JS:

CSS:

HTML:

---

请在此处查看它的实际操作：

谢谢你看起来很愚蠢！我会接受你的建议。再次谢谢你，一点也不麻烦。另外，我只是稍微编辑了CSS，从过渡中删除了最大高度。

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

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

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

<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>