如何使用JavaScript和CSS为高度变化设置动画？

Question

I have this image that gets revealed when clicked, but i would like there to be a transition animation of 1s or so.

I don't want to use jQuery. A mobile friendly css solution would be great.

Any ideas?

 #cover { height: 100px; overflow: hidden; border-radius: 4px 4px 0 0; } #image { width: 100%; display: block; } 

 <div class="cover" id="cover"> <img src="http://lorempixel.com/500/500/cats/" onclick="myFunction()" id="image" /> </div> <script> var isOpen = false; function myFunction() { var image = document.getElementById('image'); var cover = document.getElementById('cover'); if (isOpen === false) { cover.setAttribute("style", "height:" + image.offsetHeight + "px"); isOpen = true; } else if (isOpen !== false) { cover.setAttribute("style", "height:100px"); isOpen = false; } } </script> 

Answer 1

You can just add transition: height 1s to have a one second animation:

 #cover { height: 100px; overflow: hidden; border-radius: 4px 4px 0 0; -webkit-transition: height 1s; -moz-transition: height 1s; -ms-transition: height 1s; -o-transition: height 1s; transition: height 1s; } #image { width: 100%; display: block; } 

 <div class="cover" id="cover"> <img src="http://lorempixel.com/500/500/cats/" onclick="myFunction()" id="image" /> </div> <script> var isOpen = false; function myFunction() { var image = document.getElementById('image'); var cover = document.getElementById('cover'); if (isOpen === false) { cover.setAttribute("style", "height:" + image.offsetHeight + "px"); isOpen = true; } else if (isOpen !== false) { cover.setAttribute("style", "height:100px"); isOpen = false; } } </script> 

Answer 2

Theres a hacky way to do this without any JS at all. I used the max-height attribute, this way it could be used for images that does not have a fixed height.

 #cover { min-height:100px; max-height:100px; overflow:hidden; position:relative; transition: all linear 1s; } #coverToggle:checked + #cover { max-height:500px; } label { position:absolute; left:0px; top:0px; right:0px; bottom:0px; } input { position:absolute; visibility:hidden; top:-100px; left:-100px; } 

 <input type="checkbox" id="coverToggle" /> <div class="cover" id="cover"> <label for="coverToggle"></label> <img src="http://lorempixel.com/500/500/cats/" id="image" /> </div>