css - 过渡工作中途 : the ugly jump

Question

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

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

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 过渡中，将引用从“宽度”更改为“高度”，因为这是您实际要设置动画的内容。

这解决了主要问题。我还建议进行一些编码更改:1. 删除 max-height 行(因为它们不会执行任何操作，因为您已经固定了高度)，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/