Question

我正在尝试通过滑动动作来实现“切换可见性”。普通JS中的jQuery's slideDown()等功能。

我可以随着时间的推移设置值的动画，没问题，但是当应该变得可见的元素的高度未知时我该怎么办？

Existing sample solutions似乎总是将max-height值设置为固定值，但我需要设置以前未知值（高度）的动画。

（如果有一种方法可以通过css3实现这一目标，我也会很好奇！）

Answer 1

将元素的高度设置为0，隐藏溢出，以及处理动画的CSS3过渡：

.container {
  height: 0px;
  overflow: hidden;
  transition: all 1000ms;
}

然后，您可以根据其scrollHeight：

轻松地为元素设置动画

var container= document.querySelector('.container');
container.style.height= container.scrollHeight + 'px';

<强>段

document.querySelector('button').addEventListener('click', function() {
  var container= document.querySelector('.container');
  container.style.height= container.scrollHeight + 'px';
});

.container {
  font: 24px verdana;
  background: #dfd;
  height: 0px;
  overflow: hidden;
  transition: all 1000ms;
}

<button>
 Slide Down
</button>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Fiddle

Answer 2

首先，您需要在页面加载时检测元素的高度。然后将该高度设置为＆＃34; max-height＆＃34; css property。

现在你可以用一些css和js来上下滑动：

＆＃13;

window.addEventListener("load", () => {
  var div = document.getElementById("slindingDiv");
  // set max height
  div.style.setProperty("max-height", div.offsetHeight + "px");
  // default: hide 
  div.classList.add("up");
  // button logic
  document.getElementById("toggle").onclick = () => {
    if (div.classList.contains("up")) {
      div.classList.remove("up");
    } else {
      div.classList.add("up");
    }
  };
});

＆＃13;

#slindingDiv {
  transition: max-height 0.5s ease-in-out;
  overflow: hidden;
  background: antiquewhite;
  /* YOU CAN PLAY WITH WIDTH */
  width: 75%;
}
/* You just have to add this class to make it slide up */

#slindingDiv.up {
  max-height: 0 !important;
}

＆＃13;

<div id="slindingDiv">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum mi vel mauris ultricies, id vehicula mi hendrerit. Pellentesque placerat diam vel fermentum fermentum. Nulla eget odio a ipsum posuere dapibus. Ut sollicitudin tempor nibh, eu
    convallis turpis iaculis tincidunt. Integer luctus ipsum vestibulum diam laoreet, at ornare felis tincidunt. Mauris dapibus diam ut ultrices ornare. Quisque nec risus in neque consequat efficitur vitae non turpis. Vivamus posuere sapien ac tellus
    euismod volutpat eu id mauris. Nunc vel convallis nisi. Quisque convallis fringilla porttitor. Donec id consectetur nisi. Aliquam id dui ornare, efficitur erat sed, vestibulum nisi. Donec suscipit fringilla dolor, sed ullamcorper leo varius ac. Vestibulum</p>
</div>
<button id="toggle">Toggle slide</button>

＆＃13;

Answer 3

你可以测试<input type="button" id="slide" value =" Slide Down "/>是否有父母，如果他没有父母（=他的父母是<body>），你可以这样做：

var maxheight = $(window).height();

请参阅https://jsfiddle.net/9xco9t8o/

Answer 4

Properties.Resources.MyString

document.getElementsByTagName('div')[0].onclick = function() {
  this.style.height = this.offsetHeight + 'px';
  var that = this;
  setTimeout(function() { that.style.height = '0'; }, 10);
};

div {
  width: 50px;
  background-color: yellow;
  overflow: hidden;
  transition: height 300ms ease;
}

Answer 5

正如我所看到的，大多数解决方案都基于“高度”属性的动画，由于浏览器重绘过程（特别是在移动设备上），这可能会导致滞后。这就是为什么我建议使用“过渡”和“不透明”属性的动画来模拟高度的变化;

小提琴：https://jsfiddle.net/av6207fy/3/

由于使用“变换”和“不透明度”属性动画，此解决方案将表现得更加流畅。您可以在http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

了解更多相关信息

HTML

<div class="slider">
  <div class="slider-header">
    Click to toggle
  </div>
  <div class="slider-body">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui 
    blanditiis praesentium voluptatum deleniti atque corrupti quos dolores 
    et quas molestias excepturi sint occaecati cupiditate non provident, 
    similique sunt in culpa qui officia deserunt mollitia animi, id est 
    laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
    distinctio. Nam libero tempore, cum soluta nobis est eligendi optio 
    cumque nihil impedit quo minus id quod maxime placeat facere possimus, 
    omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem 
    quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet     
    ut et voluptates repudiandae sint et molestiae non recusandae. Itaque 
    earum rerum hic tenetur a sapiente delectus, ut aut reiciendis 
    voluptatibus maiores alias consequatur aut perferendis doloribus 
    asperiores repellat."
  </div>
</div>

JS：

$(function(){
  $('.slider').on('click', '.slider-header', function(e){
      $(e.delegateTarget).toggleClass('expanded');
  });
});

CSS：

* {
  box-sizing: border-box;
}

.slider {
  position: relative;
  overflow: hidden;
  margin: 40px;
}

.slider .slider-header {
  width: 100%;
  height:40px;
  text-align: center;
  line-height: 40px;
  background: green;
  color: white;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.slider .slider-body {
  width: 100%;
  padding: 20px;
  position: relative;
  z-index: 1;
  background: red;
  color: white;
  text-align: center;

  -ms-transform: translate3d(0, -140px, 0);
  -o-transform: translate3d(0, -140px, 0);
  -moz-transform: translate3d(0, -140px, 0);
  transform: translate3d(0, -140px, 0);
  opacity: 0;

  -o-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.slider.expanded .slider-body {
  -webkit=transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

Answer 6

两个纯CSS（无javascript）替代方案：

1 - 卧底复选框（允许同时打开多个方框）：

input[type=checkbox] {
  display: none;  
}

jsfiddle DEMO #1

2 - 卧底单选按钮（“单选”行为）：

input[type=radio] {
  display: none;  
}

jsfiddle DEMO #2

改进了Javascript：

2b - 单击单选按钮（“单选”行为），在第二次单击时取消选择：

var allRadios = document.getElementsByName('image');
var booRadio;
var x = 0;
for(x = 0; x < allRadios.length; x++){

allRadios[x].onclick = function() {
      if(booRadio == this){
          this.checked = false;
          booRadio = null;
      }else{
          booRadio = this;
      }
  };
}

jsfiddle DEMO #2B

如何在普通JS中实现jQuery的slideDown（），其高度未知

6 个答案: