jquery - CSS真正的“滑动”切换而不是“高度”切换

我已经四处寻找了一段时间，但没有找到一个解决方案，我正在努力创造。
我想有一个真正的“幻灯片”切换，所以div是“向下移动”。但是如果您使用JQuery slideToggle或我找到的几个CSS解决方案，它们只是修改div的高度，而不是真正的滑动它。
因此，我通过设置margin top属性的动画创建了自己的解决方案，效果很好，但是我对动态高度有问题（例如，如果调整浏览器窗口的大小），不确定负margin top应该有多高，以确保它总是完全滑出，另一方面，不要因为页边空白处太远而延迟滑入。
我现在使用

margin-top: -100%;

但是，如果您调整窗口/框架的大小，它并不总是足够的负边距。
也许已经有了更好的解决方案，但我只是没有找到，所以我创建了这个fiddle，来分享我的想法并听取您的建议。
更新：我最新的updated fiddle在这里。。。改变了一些东西，谢谢所有的反馈！

最佳答案

更新-修复错误和整理。
我认为您可以将它与jQueryshow()和hide()结合使用以避免问题。
http://jsfiddle.net/jzj80kzs/7/

$('.switch').click(function(event) {
  var theSwitch = $(this).closest('.block').find('.switch');
  var theBlock = $(this).closest('.block').find('.details');
  if (theBlock.hasClass('mt0')) {
    theSwitch.html('+ show');  // change the switch dynamically
    theBlock.removeClass('mt0').slideUp(function() {
      $(this).delay(300).hide();
    });
  } else {
    theSwitch.html('- hide');
    theBlock.addClass('mt0').slideDown().show();
  }
});

$('.switch').click(function(event) {
  var theSwitch = $(this).closest('.block').find('.switch');
  var theBlock = $(this).closest('.block').find('.details');
  if (theBlock.hasClass('mt0')) {
    theSwitch.html('+ show'); // change the switch dynamically
    theBlock.removeClass('mt0').slideUp(function() {
      $(this).delay(300).hide();
    });
  } else {
    theSwitch.html('- hide');
    theBlock.addClass('mt0').slideDown().show();
  }
});

div.block {
  position: relative;
  overflow: hidden;
  border: 1px solid #333;
  border-bottom: 0px;
  line-height: 20px;
  background-color: #fff;
}
div.block:last-child {
  border-bottom: 1px solid #333;
}
div.basics {
  position: relative;
  background-color: #fff;
  z-index: 2;
  padding: 2px 4px;
}
div.details {
  border-top: 1px solid #333;
  position: relative;
  background-color: #99F;
  z-index: 1;
  height: auto;
  margin-top: -100%;
  -webkit-transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -moz-transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -o-transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
div.mt0 {
  margin-top: 0px;
}
span.switch {
  float: right;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>