Question

我正在开发自定义collapser，但我不知道如何在隐藏时进行转换。
在线搜索我发现“display：none;”，但它不支持转换。
我试过做身高：自动;然后身高：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');
  };
});

这是一个链接：https://codepen.io/Keyon/pen/937706ce73bc3f68cbeff6dd6faf6c87

Answer 1

为什么不使用Jquery的Fade或Slide动画，你可以使用animate函数制作自己的。

淡出：

 $('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

转换不适用于高度，您需要使用max-height。使用下面的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-show

切换.clp课程

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

编辑：我们最初设置display:none

时，您不需要max-height: 0

Answer 3

你可以使用jQuery的slideDown()和slideUp()来扩展和折叠你的div：

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

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

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做了一些改动。通过这种方式，我们确保它的动画很好，然后在转换完成后就消失了。否则它可能会阻止某些鼠标事件并影响其他元素。

<强>更新

这里是用于折叠的jQuery（codepen）：

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

您不需要在此处切换课程，但我保留了以防您想要更改其他CSS属性。

Answer 5

使用这些类属性可能是它的工作

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

Answer 6

在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 7

.slideToggle()

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

过渡到崩溃

7 个答案: