Question 379411 in Html Question posted in
Some basic documentation can be found here.

Html – CSS animate from position bottom to top

I want to hide the content by positioning it bottom: 100% in parent;

Then on click I want it to slide down to top:0;

Currently this snippet does not work (at least no animation).

I dont want to position content to top:-100% because I want animation to start immediately, not wait for content to travel whole parent height (that why I put bottom:100%).

var content = document.querySelector('.content')

document.querySelector('#toggle').addEventListener('click', function() {


  if (content.classList.contains('opened')) {
    content.classList.remove('opened')
  } else {
    content.classList.add('opened')
  }

})
.wrap {
  position: relative;
  width: 300px;
  height: 500px;
  background: #ddd;
  overflow: hidden;
}

.content {
  position: absolute;
  bottom: 100%;
  transition: all 0.5s;
}

.opened {
  bottom: auto;
  top: 0;
}

#toggle {
  position: absolute;
  top: 0;
  left: 340px;
}
<div class="wrap">

  <div class="content">

    Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. Curabitur dignissim nunc id arcu. Nulla facilisi.

  </div>
</div>


<a href="#" id="toggle">toggle</a>
Tags:

2

Answers


  1. 0

    Don’t use position, use a transform or translate.

    var content = document.querySelector('.content')

document.querySelector('#toggle').addEventListener('click', function() {


  if (content.classList.contains('opened')) {
    content.classList.remove('opened')
  } else {
    content.classList.add('opened')
  }

})
    .wrap {
  position: relative;
  width: 300px;
  height: 500px;
  background: #ddd;
  overflow: hidden;
}

.content {
  transition: translate 0.5s;
  translate: 0 -100%;
}

.opened {
  translate: 0 0;
}

#toggle {
  position: absolute;
  top: 0;
  left: 340px;
}
    <div class="wrap">

  <div class="content">

    Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. Curabitur dignissim nunc id arcu. Nulla facilisi.

  </div>
</div>


<a href="#" id="toggle">toggle</a>
    Login or Signup to reply.
  2. 0

    Just add a transform: translateY(100%); to the .opened class to achieve what you want with smooth animation.

    .opened {
     /* Set the transform property to translateY 100% & remove other CSS properties */
     transform: translateY(100%);
}

    Run the snippet below to see the preview:

    var content = document.querySelector('.content')

document.querySelector('#toggle').addEventListener('click', function() {

  if (content.classList.contains('opened')) {
    content.classList.remove('opened')
  } else {
    content.classList.add('opened')
  }

})
    .wrap {
  position: relative;
  width: 300px;
  height: 500px;
  background: #ddd;
  overflow: hidden;
}

.content {
  position: absolute;
  bottom: 100%;
  transition: all 0.5s;
}

/* Set the transform property to translateY 100% & remove other CSS properties */
.opened {
 transform: translateY(100%);
}

#toggle {
  position: absolute;
  top: 0;
  left: 340px;
}
    <div class="wrap">
  <div class="content">
    Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. Curabitur dignissim nunc id arcu. Nulla facilisi.
  </div>
</div>

<a href="#" id="toggle">toggle</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search