为什么在使用 javascript / jQuery 添加类时 css 转换不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21146652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is css transition not working when adding class using javascript / jQuery?
提问by Steven
I have a message box which I want to slide down on click. I do this by adding a css class through Angular (and jQuery in my example). But my CSS transition does not take effect.
我有一个消息框，我想在单击时向下滑动。我通过 Angular（在我的例子中是 jQuery）添加一个 css 类来做到这一点。但是我的 CSS 过渡没有生效。
Is there any obvious mistake I'm doing?
我在做任何明显的错误吗？
Here's my fiddle: http://jsfiddle.net/mBKXn/
这是我的小提琴：http: //jsfiddle.net/mBKXn/
and my code:
和我的代码：
// jQuery
$('.test').on('click',function(){
$('#msgContainer').toggleClass('msgShow');
});
// HTML
<div class="container">
<div id="msgContainer" class="msg">
<p>Message here</p>
<p>T2</p>
<p>T4</p>
</div>
Test text
</div>
<button class="test">Click</button>
// CSS
.container{
position: relative;
height: 200px;
width: 400px;
border: solid 1px #222;
}
.msg{
position: absolute;
top: 0;
background-color: #FEEFB3;
height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: height 0.8s linear;
-moz-transition: height 0.8s linear;
-o-transition: height 0.8s linear;
-ms-transition: height 0.8s linear;
transition: height 0.8s linear;
}
.msgShow{
height: auto;
}
采纳答案by kasper Taeymans
you need to set a defined height. Height:auto won't work as this is the default height value.
你需要设置一个定义的高度。Height:auto 不起作用，因为这是默认的高度值。
see the specs for the height property here: http://www.w3.org/TR/CSS2/visudet.html#the-height-property
在此处查看 height 属性的规格：http: //www.w3.org/TR/CSS2/visudet.html#the-height-property
.msgShow{
height: 100%;
}
回答by dfsq
To animate height from 0 to auto you have to use max-heightinstead:
要将高度从 0 设置为自动，您必须max-height改用：
.msg{
position: absolute;
top: 0;
background-color: #FEEFB3;
max-height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: max-height 0.8s linear;
-moz-transition: max-height 0.8s linear;
-o-transition: max-height 0.8s linear;
-ms-transition: max-height 0.8s linear;
transition: max-height 0.8s linear;
}
.msgShow{
max-height: 1000px;
}
Seems to work: http://jsfiddle.net/mBKXn/3/
似乎工作：http: //jsfiddle.net/mBKXn/3/
Also take a look at this question.
也看看这个问题。
回答by erikrunia
Another (older IE compliant) way to do this is through slideToggle.
另一种（较旧的 IE 兼容）方法是通过 slideToggle。
Updated Fiddle that worksand another Fiddlewhere I removed some of your transition css and it makes the animation smoother in my opinion.
更新了有效的 Fiddle和另一个 Fiddle，我删除了一些过渡 css，在我看来它使动画更流畅。
your code needs a slight change:
您的代码需要稍作更改：
$('.test').on('click',function(){
$('#msgContainer').slideToggle('slow');
});
and your class needs a slight change:
并且您的课程需要稍作更改：
.msg{
display:none;
position: absolute;
top: 0;
background-color: #FEEFB3;
height: auto;
width: 100%;
overflow: hidden;
}
