Question

我想要过渡＆＃34;过渡＆＃34;我添加和删除一个类时工作正常，但我还没有成功。

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

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

如果有人可以看一眼并发光，我会很感激......

谢谢，

Answer 1

在CSS过渡中，更改＆＃39; width＆＃39;到了＆＃39;身高，这就是你实际动画的内容。

这解决了主要问题。我还建议进行一些编码更改：1。删除最大高度线（因为他们已经修复了高度，因为他们没有做任何事情），2。因为你已经在使用jQuery了一行，在适用的其他行中使用它来简化事情（你可以用它来修复你的破坏＆＃34;结果＆＃34;）3。删除＆＃39; onclick＆＃39;来自HTML的属性并通过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/

过渡工作的一半：丑陋的跳跃

1 个答案: