最大高度上的CSS3动画未按预期工作
我正在尝试在应用类之后为元素的高度添加动画，下面是简化的代码：
HTML
<div class="section">
<div class="panel">
<a href="#" class="toggle">Click</a>
<div class="panel-content">
Some content...
</div>
</div>
</div>CSS
.section {
position: relative;
width: 500px;
height: 200px;
margin: 100px auto;
background: #ccc;
}
.panel {
width: 65%;
position: absolute;
left: 0;
bottom: 0;
}
.toggle {
display: inline-block;
height: 15px;
background: #ddd;
}
.panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.active .panel-content {
max-height: 9999px;
}JS
$(function() {
$('.toggle').on('click', function (e) {
e.preventDefault();
$(this).closest('.panel').toggleClass('active');
});
});当我单击.toggle链接时，会在.panel元素上设置一个active类来为.panel-content高度设置动画效果，但是，当第一次添加该类时，显示的内容没有动画效果，当删除它时，元素需要一秒钟(转换的持续时间)才能开始动画效果。你可以在这里看到一个现场演示：http://codepen.io/javiervd/pen/bLhBa
我也尝试过使用position和overflow属性，但我不能让它工作，也许有其他方法可以达到同样的效果？
提前谢谢。
回答 1
Stack Overflow用户
发布于 2013-06-23 05:33:25
当有事情发生时，你需要做一个transition。这不是您想要的，但让我向您展示一些东西：
.pannel-content{
height:0;
}
.pannel-content:hover{
height:50px; transition:height 2s;
}这就是transition的工作原理。您尚未创建操作。这里没有click伪类，而且你也不想影响相同的元素。试着使用jQuery，比如。
<html>
<head>
<style type='text/css'>
.active .pannel-content{
display:none; height:9999px;
}
</style>
</head>
<body>
<div class='section'>
<div class='panel'>
<a href='#' class='toggle'>Click</a>
<div class='panel-content'>
Some content...
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
$('.toggle').click(function(){
$('.active .pannel-content').show('slow');
});
</script>
</body>
</html>您还可以使用jQuery的.animate()方法。当然，我建议您使用declair a DOCTYPE并使用<meta>标记。此外，您还应该使用外部CSS，因为它将缓存在用户的浏览器内存中。
有关详细信息，请访问http://api.jquery.com/show/和http://api.jquery.com/animate/。
https://stackoverflow.com/questions/17255161
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号