Question

我使用javascript代码来增加和减少点击事件中div的高度。但我也想要应用transition-duration属性，以便过渡顺利。

这是css代码

#content {
    height: auto;
    width:400px;
    background-color:#F30;
    transition-duration:2s;
}

#content.expand {
    height: 300px;
    transition-duration:2s;
}

这是javascript代码

function chk()
{
    var node = document.getElementById('content');

    node.classList.toggle('expand');
}

该功能正常运行。我已应用过渡属性，但这不起作用。

Answer 1

根据Bugzilla的说法，这是 Bug 571344 。

auto之间的转换会影响Firefox（完全不转换），但在其他浏览器中也会以怪异的方式工作。

例如，在Chrome中，height: auto在转换过程中被视为height: 0，您会看到示例的红色背景较小，然后消失，然后恢复为真正的“自动”值

只需指定一个高度，它就可以在每个浏览器中运行良好： Running demo

Answer 2

尝试这样的跨浏览器解决方案：

 transition-duration:2s; 
 -o-transition-duration:2s; 
 -moz-transition-duration:2s; 
 -webkit-transition-duration:2s;

而不仅仅是transition-duration:2s;

Answer 3

这是值转换的问题，在Mozilla中它以-moz-transform为前缀。

#content {
    height: auto;
    width:400px;
    background-color:#F30;
    -webkit-transition:all .1s ease;
 -moz-transition:all .1s ease;
 -ms-transition:all .1s ease;
 transition:all .1s ease;
}

#content.expand {
    height: 300px;
   -webkit-transition:all .1s ease;
 -moz-transition:all .1s ease;
 -ms-transition:all .1s ease;
 transition:all .1s ease; 
}

使用javascript函数在div上应用CSS转换属性

3 个答案: