css3实现 slideUp/slideDown效果

最新推荐文章于 2024-07-11 17:14:12 发布

原创最新推荐文章于 2024-07-11 17:14:12 发布 · 7.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css3

css3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用纯CSS3实现上下滑动效果，并结合JavaScript增强交互体验。通过简单的HTML结构与CSS过渡动画，可以轻松创建平滑的滑动动画。JavaScript则用于控制动画状态的切换。

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