HTML＆CSS3向下滑動

我編寫了下面的jQuery，這使得div在單擊鏈接時向下滑動。是否可以在沒有jQuery的純css3中使用？HTML＆CSS3向下滑動

HTML

<header> 
    <h1>Heading</h1> 
</header> 
<section> 
    <a href='#' id='click'>Lorem ipsum dolor sit amet, consectetur adipiscing elit vestibulum convallis.</a> 
    <div id='show'></div> 
</section>

jQuery的

$('#click').click(function() { 
$('#show').slideDown('slow', function() { 
// Animation complete. 
    }); 
});

來源

2013-06-02 Susan Robinson

@ F4R-20這個問題用了jQuery，我寧願不使用 –

@SusanRobinson，我已經更新了我的答案，告訴我你還想要什麼 –

DEMO FIDDLE WITHOUT JQUERY

這裏是代碼 -

HTML -

<label for="test1" class="test">Click Me ;)</label> 
<input type="checkbox" id="test1"/> 
<div class="test2"> 
    Yo!! you clicked it, now I am visible to you with a smooth animation 
</div>

CSS-

.test{ 
    background: yellow; 
    padding:10px; 
    display:block; 
    font-family: tahoma; 
    text-align:center; 
    width:100px; 
    font-weight:bold; 
    clear: both; 
} 
.test2{ 
    width:100px; 
    height:0px; 
    text-align:center; 
    font-size:12px; 
    font-family: tahoma; 
    color:#fff; 
    font-weight:bold; 
    padding:10px; 
    opacity:0; 
    float:left; 
    overflow:hidden; 
    background:red; 
    -webkit-transition: all 0.7s ease; 
    -moz-transition: all 0.7s ease; 
    -ms-transition: all 0.7s ease; 
    -o-transition: all 0.7s ease; 
    transition: all 0.7s ease; 
} 
#test1:checked + .test2{ 
    height: 70px; 
    opacity:1; 
} 
#test1{ 
    display:none; 
}

來源

2013-06-02 12:34:49

這不是我想要的 –

已更新，以確切地得到你想要的 –

很好地使用了一個複選框！ –

是的，但你可能會想一些JavaScript反正。

#show { 
    padding: 20px; 
    background: #ccc; 
    max-height:0; 
    overflow:hidden; 
    -webkit-transition:max-height 1s; 
    -moz-transition:max-height 1s; 
    transition:max-height 1s; 
} 

#show:target { 
    max-height:1000px; /* you can't transistion to height:auto */ 
}

http://jsfiddle.net/richbradshaw/hgdrw/1/

這裏有幾件事情：