[英]Why is css transition not working when adding class using javascript / jQuery?
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). 我通过Angular添加一个css类(在我的例子中使用jQuery)来实现这一点。 But my CSS transition does not take effect. 但是我的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;
}
To animate height from 0 to auto you have to use max-height
instead: 要将高度从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/
you need to set a defined height. 你需要设定一个确定的高度。 Height:auto won't work as this is the default height value. 高度:自动无效,因为这是默认高度值。
see the specs for the height property here: http://www.w3.org/TR/CSS2/visudet.html#the-height-property 请参阅此处有关高度属性的规范: http : //www.w3.org/TR/CSS2/visudet.html#the-height-property
http://jsfiddle.net/mBKXn/7/ http://jsfiddle.net/mBKXn/7/
.msgShow{
height: 100%;
}
Another (older IE compliant) way to do this is through slideToggle. 另一种(较旧的IE兼容)方法是通过slideToggle。
Updated Fiddle that works and another Fiddle where I removed some of your transition css and it makes the animation smoother in my opinion. 更新了小提琴,可以工作 , 另一个小提琴 ,我删除了你的一些过渡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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.