Question

我试图在单击标题时对表单扩展应用CSS3过渡效果但是它不起作用

HTML：

<section class="widget" id="widget-1">
    <h4>Contact Us</h4>
    <form class="contact-form collapse" role="form">
        <input type="text" class="form-control" placeholder="Name">
        <input type="text" class="form-control" placeholder="Email">
        <input type="text" class="form-control" placeholder="Phone Number">
        <textarea class="form-control" placeholder="Question"></textarea>
        <button type="submit">Submit</button>
    </form>
</section><!-- widget-1 -->

CSS

#widget-1 h4{
    cursor: pointer;
}
#widget-1 form.collapse{
    height: 0px;
}
#widget-1 .contact-form{
    overflow: hidden;
    height:auto;
    transition:all 0.9s linear;
    -webkit-transition:all 0.9s linear;
    -moz-transition:all 0.9s linear 0.5s;
    -ms-transition:all 0.9s linear;
    -o-transition:all 0.9s linear;
}

Jquery的

$('#widget-1 h4').click(function(){
        $('.contact-form').toggleClass('collapse');
    });

JSBIN

Answer 1

转换height: auto无效。根据以下答案，解决方法是将max-height从0转换为永远不会成为框的实际边界的内容： How can I transition height: 0; to height: auto; using CSS?

Answer 2

如下所示更改您的CSS：

#widget-1 .contact-form{
    overflow: hidden;
    height:100px; //Change this
    transition:all 0.9s linear;
    -webkit-transition:all 0.9s linear;
    -moz-transition:all 0.9s linear 0.5s;
    -ms-transition:all 0.9s linear;
    -o-transition:all 0.9s linear;
}

Answer 3

我可以建议将你的CSS更改为

#widget-1 form.collapse{
    display: none;  
}

并使用jQuery进行转换：

$('#widget-1 h4').click(function(){
    $('.contact-form').toggle(900);
});

Answer 4

转换将永远不会运行，因为.contact-form类始终应用于元素，并且状态永远不会更改。您正在使用jQuery，因此您可以使用其.slideToggle()函数并摆脱CSS转换，如下所示：http://jsbin.com/papudizi/2/edit

$('#widget-1 h4').click(function(){
    $('.contact-form').slideToggle();
});

编辑：如果您需要纯CSS解决方案，则可以在:hover而非点击时执行此操作。在这种情况下，将transition应用于.contact-form类，并将高度应用于新的#widget-1:hover .contact-form规则，以便在光标结束时将其应用于.contact-form元素。＃widget-1元素。

#widget-1 .contact-form{
    overflow: hidden;
    height: 0px;
    transition:all 0.9s linear;
    -webkit-transition:all 0.9s linear;
    -moz-transition:all 0.9s linear 0.5s;
    -ms-transition:all 0.9s linear;
    -o-transition:all 0.9s linear;
}
#widget-1:hover .contact-form{
    height: 100px;
}

请在此处查看：http://jsbin.com/talelufu/2/edit

Answer 5

更改定义值的高度，如下所示：

#widget-1 .contact-form{
    overflow: hidden;
    height:200px; /* Here we go */
    transition:all 0.9s linear;
    -webkit-transition:all 0.9s linear;
    -moz-transition:all 0.9s linear 0.5s;
    -ms-transition:all 0.9s linear;
    -o-transition:all 0.9s linear;
}

Answer 6

的 Demo

JS

$('#widget-1 h4').click(function () { if ($('#widget-1 form').is(":hidden")) { $('.contact-form').slideDown('slow'); } else { $('#widget-1 form').slideUp('slow'); } });

CSS

#widget-1 h4 { cursor: pointer; } #widget-1 form { display:none; }

css过渡效果无法点击？

6 个答案: