崩溃的过渡

Question

我正在开发自定义折叠器，但我不知道如何在隐藏时进行转换。
网上搜索发现"display: none;"，但是不支持转场。
我试过 height: auto;然后高度：0px；但它也不支持过渡。

代码如下：

HTML

<a class="clp" href="#clp-1"><div>Button</div></a>
<div class="clp-body clp-show" id="clp-1">Lorem ipsum</div>

CSS

 .clp > div {
  border: 1px solid black;
  border-radius: 3px;
  width: 150px;
  padding: 5px;
}

.clp {
  text-decoration: none;
  font-family: Verdana;
  color: black;
}

.clp-body {
  border: 1px solid black;
  border-radius: 3px;
  width: 150px;
  padding: 5px;
  margin-top: 5px;
  transition: all 0.5s ease;
}

.clp-show {
  opacity: 1;
}

.clp-show {
  opacity: 0;
  display: none; /* Only for the example */
}

JS (jQuery)

 $('a.clp').click(function(){
  var value = $(this).attr("href");
  if ($('div'+(value)).hasClass('clp-show')) {
    $('div'+(value)).addClass('clp-hide');
    $('div'+(value)).removeClass('clp-show');
  }
  else {
    $('div'+(value)).removeClass('clp-hide');
    $('div'+(value)).addClass('clp-show');
  };
});

这里是 link：https://codepen.io/Keyon/pen/937706ce73bc3f68cbeff6dd6faf6c87

Answer 1

为什么不使用 Jquery 的淡入淡出或滑动动画，您可以使用动画功能制作自己的动画。

淡入淡出：

 $('div'+(value)).fadeIn();
 $('div'+(value)).fadeOut();

幻灯片：

 $('div'+(value)).slideUp();
 $('div'+(value)).slideDown();

创建自己的动画：

  $('div' + (value)).animate({
      //some css propeties example:
      margin-right: 500px
  }, 5000, function() {
    // Animation complete.
  });

Answer 2

使用这些类属性可能有用

.clp-show {
  opacity: 1;
  height:auto;
  overflow:visible;
}

.clp-show {
  opacity: 0;
  height:0;
  overflow:hidden;
}

Answer 3

在 height 属性上使用 CSS 动画。

div #hidingDiv {
    height: 50px
    width: 50px
}
@keyframes shrinkup {
    from {
        height: 50px
    }
    to {
        height: 0px
    }

当您希望它消失时：

document.getElementById("hidingDiv").setAttribute("style", "animation-name: shrinkup; animation-duration: 5s")

当您运行 JavaScript 代码时，这只是在 div 上设置动画。

Answer 4

您可以使用 jQuery 为 css 属性设置动画。

$('a.clp').click(function() {
    var value = $(this).attr("href");
    var targetDiv = $('div' + (value));
    targetDiv.toggleClass('clp-show');
    if (targetDiv.hasClass('clp-show')) {
       targetDiv.css('display', 'block');
       targetDiv.animate({
         opacity: 1
       }, 500);

    } else {
       targetDiv.animate({
         opacity: 0
       }, 500, function() {
         // This will be executed when the animation is complete
         targetDiv.css('display', 'none');
       });
    }
});

这是更新后的 codepen。我也对 CSS 做了一些改动。通过这种方式，我们可以确保它的动画效果很好，然后在转换完成后消失。否则可能会阻塞一些鼠标事件，影响其他元素。

更新

折叠 (codepen) 的 jQuery:

$('a.clp').click(function() {
    var value = $(this).attr("href");
    var targetDiv = $('div' + (value));
    targetDiv.toggleClass('clp-show');
    targetDiv.slideToggle(500);
});

你不需要 class 在这里切换，但我把它留了下来，以防你想更改其他 CSS 属性。

Answer 5

过渡不适用于高度，您需要使用最大高度。使用下面的 CSS.

.clp-body {
    max-height: 0; /* set the initial height to 0 */
    transition: max-height .5s ease-in; /* define the transition */
}
.clp-show {
    max-height: 1000px; /* set it to some high value but it will not expand more than the content height */
}

点击 .clp

切换 clp-show class

$(".clp").on("click", function () {
    $(".clp-body").toggleClass("clp-show");
});

编辑：您不需要 display:none，因为我们最初设置 max-height: 0

Answer 6

您可以使用 jQuery 的 slideDown() and slideUp() 并像这样展开和折叠您的 div：

$('#clp-1').slideDown(); // expand
$('#clp-1').slideUp(); // collapse

您还需要删除 CSS 行 transition: all 0.5s ease; 以使 jQuery 滑动正常工作。

Answer 7

.slideToggle()

它结合了：.toggle() + .slideUp() + .slideDown()

崩溃的过渡

Transition for a Collapse

html

css

jquery

collapse