显示 UL 的部分内容然后通过转换折叠

Question

我创建了一个显示部分内容并通过触发器折叠的列表。一切正常，除了我无法在它崩溃时使用 CSS 转换使其工作。基本上，我在 2 类之间切换并应用高度：100%

HTML

<div class="list">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
  </ul>
  <span class="more-less"></span>
</div>

CSS

.list.expand {
  height: 180px;
  overflow: hidden;
}
.list.expand.open {
    height: 100%;
  padding-bottom: 20px;
}

JS

var list = $(".list");
$(".more-less").click(function() {
    list.toggleClass("open closed"); 
});

我CODEPEN做了一些测试。我认为这是需要特定解决方案的特定情况。我花了几个小时尝试在 Whosebug（CSS 和 JS）上找到的片段，但没有成功。

两者都不 CSS transition: height .5s ease;或 .animate(height...) 似乎对我有用：/所以，任何帮助或线索将不胜感激:)谢谢

编辑：我忘记了一个重要信息：列表内容是动态加载的（WP），所以我需要将高度设置为 "auto"。

Answer 1

您尝试过向 .list.expand 添加过渡吗？

.list.expand {
  height: 180px;
  overflow: hidden;
  -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
  -moz-transition: height 2s; 
  transition: height 2s;
}

Answer 2

感谢 this post，我终于找到了 jQuery 的解决方法。可能不是实现该目标的最佳方法，但它确实有效：p

var list = $(".list");

// Apply only if list height is taller than 100px
if (list.height() > 100) {
    list.addClass("expand closed");
}   

// First, set height to auto then memorize the height value in a variable,
// then set the height to 100px
list.css("height", "auto");
var listheight = list.css("height");
list.css("height", "100px");

// When click to the "more-less" trigger, toggle between "open" and "closed" class,
// then apply the correct height for each class
$(".more-less").on("click", function() {
  list.toggleClass("open closed");
  if (list.hasClass("open")) {
    list.height(listheight);
  }
  if (list.hasClass("closed")) {
    list.height(100);
  }
});

CSS

.list.expand {
  height: 180px;
  overflow: hidden;
  -webkit-transition: height .3s ease-in-out;
  -moz-transition: height .3s ease-in-out;
  transition: height .3s ease-in-out;
}

DEMO HERE 在 CodePen

Answer 3

我找到了一个更好的方法来实现这个，.scrollHeight

JS

var list = $(".list");

// variable storing an integer corresponding to the scrollHeight pixel value of the element.
var fullHeight = list[0].scrollHeight+'px';

if (list.height() > 100) {
  list.addClass("expand closed");
  list.height(100);
}

$(".more-less").on("click", function() {  
  if(list.hasClass("closed")) {
    list.animate({
      height: fullHeight
    }, 200);
  } else if (list.hasClass("open")) {
    list.animate({
      height: "100px"
    }, 200);
  }
  list.toggleClass("open closed");
});

CSS

.list.expand {
  overflow: hidden;
}

DEMO HERE 在 CodePen

显示 UL 的部分内容然后通过转换折叠

Show partial content of UL then collapse with transition

css

transition

jquery-animate