CSS3可摺疊面板

我一直在嘗試新的webkit CSS3動畫技術。我做了一個應該可以工作的可摺疊面板，但奇怪的是跳起來並且靜止不動。CSS3可摺疊面板

CSS

.reveiws .content { 
    font-size:12px; 
    line-height:18px; 
    height:72px; 
    overflow:hidden; 
    float:left; 
    vertical-align:top; 
    max-width:560px; 
    -webkit-transition: height 800ms; 
    -moz-transition: height 800ms; 
} 
.reveiws .contentfull { 
    height:100%; 
    -webkit-transition: height 800ms; 
    -moz-transition: height 800ms; 
}

HTML

<div id="pan<?php the_ID();?>" class="content"><?php the_content();?></div> 

    <div class="author" style="text-align:left; padding-right:10px;"> 

    <a href="#" onclick="$('#pan<?php the_ID();?>').addClass('contentfull'); $(this).hide(); $(this).next().show(); return false">Read More &raquo;</a> 
    <a href="#" onclick="$('#pan<?php the_ID();?>').removeClass('contentfull'); $('#pan<?php the_ID();?>').addClass('content'); $(this).hide(); $(this).prev().show(); return false" style="display:none;">&laquo; Close panel</a>

繼承人FIDDLE http://jsfiddle.net/L6Jwa/1/

來源

2011-05-21 Robin Knight

我覺得你的問題是，你有72px的高度在一類，而在另一個100％。改爲例如400px在第二課，它工作正常。

我不確定你可以在這種情況下使用％單位。

來源

2011-05-21 21:34:47 kwicher

CSS3可摺疊面板

回答

相關問題