css3实现 slideUp/slideDown效果

　

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>
<p id="wrap">
    <p id="slider">
        <p>Blah blah blah blah blah....</p>
    </p>
</p>

#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>
<p class="row">
  <p 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</p>
</p>

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');
  }
}

相关阅读

何为fine-tune以及其一般的实现流程

第一问：Finetune:是微调的意思，也就是整个要训练的网络不是从随机状态开始训练而是从一个比较好的初始状态开始微调。第二问：1）使用预

人民币数字大写转换 java实现 [附源码]

动机 业务系统开发的报表中经常需要将人民币数值转换为大写，所以江苏南大先腾java研发框架中写了一个通用的大写转换函数。由于报

第三讲：再例 编程实现英尺到米的转换

/* *Copyright(C)2018,CSDN学院 *All rights reserved *文件名称：main.c *作者：黑可可 *完成日期：2018.4.6 *版本号：V1.0 *问题

ExpandableListView 实现点击某个group的时候再去请求

整个项目虽然简单，我还是上传到github了，欢迎star https://github.com/MZCretin/SuperExpandableListView 昨天有个朋友问我有没

Axure中继器的基本使用：实现一个简易的人员添加、删除

现在在公司里大多数时间使用的原型工具是墨客，真的是简单易用，拖拽式的设计简直是良心。但是也有不足的地方，个人对交互要求较高，这一