How to use CSS animation to move div from top to bottom of screen?

Question

I'm trying to get a div to expand from the top of the page to the bottom. When users click button then animation starts the div will be hidden (height 0%), till it fills its content. I tried to do it like so, but none of it seems to be working.

CSS and HTML

<div class="container">
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
</div>    

<button type="button" id="expand">Expand</button>

.container{
    background:lightblue;
    top: 0px; 
    left: 0px; 
    width: 100%; 
    display: block; 
    height:0px;
    overflow:hidden;
 }

http://jsfiddle.net/3hmvy278/

i am learner i did not write any code in js please guide me to do that — AbhiRam, Mar 14 '19 at 05:01
I think SO is not teaching class and you can not use SO for doing your home works. you should do it yourself — Mehdi Dehghani, Mar 14 '19 at 05:07
Possible duplicate of [How can I transition height: 0; to height: auto; using CSS?](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — Mehdi Dehghani, Mar 14 '19 at 05:09
You need to use `max-height` with CSS transition. You would find detailed answer in link suggested by @Mehdi Dehghani. CSS transition will work only if you know maximum possible height your content will ever have. Otherwise, you will need to use some javascript method to expand/collapse. If you are using `jQuery`, you can do it with simple `$('.elementClass').toggle()`. — Rhythm Ruparelia, Mar 14 '19 at 06:12

Andy Hoffman · Accepted Answer · 2019-03-16T18:18:44.353

1

Give this a try. I'm using no dependencies, only some vanilla JavaScript and a CSS transition.

document.querySelector(".myButton").addEventListener("click", () => {
  document.querySelector(".container").classList.toggle("start");
});

.container {
  background: lightblue;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: 1s height ease-in-out;
}

.container.start {
  height: 100vh;
}

/* Ignore */

body {
  margin: 0;
}

.myButton {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 100%;
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
</div>

<button class="myButton">Toggle</button>

edited Mar 16 '19 at 18:18

answered Mar 14 '19 at 05:05

Andy Hoffman

18,436
4
42
61

this is good but i want to animate div like toggle functionality – AbhiRam Mar 14 '19 at 05:19
then only it should useful for me' – AbhiRam Mar 14 '19 at 05:20
@AbhiRam I made the adjustment for you. – Andy Hoffman Mar 14 '19 at 05:29
cant we make div's height expand with its content? – AbhiRam Mar 14 '19 at 05:51
height:auto working but animation not working if i kept this line – AbhiRam Mar 14 '19 at 05:52
any suggestion about this? – AbhiRam Mar 14 '19 at 05:52
@AbhiRam How do you mean? Do you mean limit the height of the `transition` to the amount of content in `.container`? – Andy Hoffman Mar 14 '19 at 05:52
1

@AbhiRam Take a look at [this](https://jsfiddle.net/qoLwjz0c/). I changed `height` to `max-height`. – Andy Hoffman Mar 14 '19 at 05:55

score 0 · Answer 2 · answered Mar 14 '19 at 05:04

Here i am adding class .height on click of button.

.height {
  height: 100%
}

$(document).ready(function() {
  $("button").click(function() {
    $(".container").toggleClass("height")
  });
});

.container {
  background: lightblue;
  top: 0px;
  left: 0px;
  width: 100%;
  display: block;
  height: 0px;
  overflow: hidden;
}

.height {
  height: 100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
</div>

<button type="button" id="expand">Expand</button>

Here I am toggling the display of div on click of button

$(document).ready(function() {
  $("button").click(function() {
    $(".container").toggle()
  });
});

.container {
  background: lightblue;
  top: 0px;
  left: 0px;
  width: 100%;
  display: block;
  height: 100%;
  overflow: hidden;
  display:none;
}

.height {
  height: 100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
  <h1>Lorem Ipsum</h1>
</div>

<button type="button" id="expand">Expand</button>

How to use CSS animation to move div from top to bottom of screen?

2 Answers2