css3实现 slideUp/slideDown效果

1. 纯css3实现

<h1><mark>PURE CSS</mark> Slide Up and Slide Down</h1>
<input id="toggle" type="checkbox"><label for="toggle">toggle slider</label>
<div id="wrap">
    <div id="slider">
        <p>Blah blah blah blah blah....</p>
    </div>
</div>

#wrap {
    height: 200px;
    width: 200px;
    border: 1px solid #ccc;
}
#slider {
    overflow-y: hidden;
    max-height: 200px;
    -webkit-transition: all .5s cubic-bezier(0, 1, 0.5, 1);
    transition: all .5s cubic-bezier(0, 1, 0.5, 1);
    background: pink;
    height: inherit; 
    width: inherit;
}
#toggle {
    display: none;
}
#toggle + label {
    padding: 1px 6px;
    text-align: center;
    border-radius: 2px;
    background: rgb(221, 221, 221);
    border: 1px outset buttonface;
    margin-bottom: 2px;
    display: inline-block;
    cursor: pointer;
}
/* most important part is here: */
#toggle:checked ~ #wrap > #slider {
    max-height: 0;
}

2. css3+Js实现

.row {
  border: 1px solid rgba(255, 0, 0, .7);
  width: 400px;
  overflow: hidden;
}

.slide {
  background-color: rgba(0, 255, 0, .3);
  padding: 5px;
  transition: all  .5s cubic-bezier(0, 1, 0.5, 1);
  transform: translateY(0);
}

.slide-up {
  transform: translateY(-100%);
}

<button id="toggleSlider">Toggle Slider</button>
<div class="row">
  <div class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim minus repellat amet nobis hic dolores blanditiis inventore quo ex quaerat omnis accusantium adipisci velit laborum facilis culpa nemo ab placeat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates tempore optio est nihil earum neque atque vero voluptatibus deserunt. Doloribus error voluptatem non quo molestias quisquam repellat odio tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus culpa voluptate architecto deserunt nemo animi officiis debitis necessitatibus deleniti nobis pariatur doloribus facilis suscipit ipsa earum consectetur eligendi. Perspiciatis ratione. lorem</div>
</div>

var toggleButton = document.getElementById('toggleSlider'),
    slide = document.querySelector('.slide');

toggleButton.addEventListener('click', toggleSlider, false);

function toggleSlider() {
  if (slide.classList.contains('slide-up')) {
    slide.classList.remove('slide-up');
  } else {
    slide.classList.add('slide-up');
  }
}