CSS过渡不适用于折叠

Question

我创建了一个阅读更多按钮来切换段落。 我正在使用默认引导类进行折叠。 collapsing 类似乎没有进行 CSS 转换。 这是codepen链接 http://codepen.io/theMugician/pen/YNWmWK

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 1s ease;
}

.collapse.in {
  height: 200px;
}

$(document).ready(function() {

$("#read-more-1").click(function(){
      console.log("click works");
      if($("#read-block-1").hasClass("in")) {
         $("#read-block-1")
            .addClass('collapsing')
            .removeClass('in')
            .removeClass('collapsing')
      }else{
        $("#read-block-1")
            .addClass('collapsing')
            .addClass("in")
            .removeClass('collapsing')
      }
   })
})

Answer 1

您正在添加 collapsing 类并立即将其删除。第二个问题是 collapse 类有来自 Bootstrap CSS 的 display: none 并且你不能动画显示属性。

你可以把你的代码简化成这样：

CSS：

.collapse {
  display: block;
  transition: height 1s ease;
  height: 0;
  overflow: hidden;
}
.collapse.in {
  height: 200px;
}

JS：

var readBlock = $('#read-block-1');

$("#read-more-1").click(function() {

  if (readBlock.hasClass("in")) {
    readBlock.removeClass('in');
  } else {
    readBlock.addClass("in");
  }

});

这个解决方案并不完美，因为它会将折叠的内容分解到下一行。

CODEPEN

为避免您可以转换整个段落（设置段落的高度，例如 50 像素，当您单击按钮时，将其更改为例如 200 像素）。

HTML：

<p class="collapse">..........</p>
<a id="read-more-1">read more</a>

CSS：

.collapse {
  display: block;
  transition: height 1s ease;
  height: 50px;
  overflow: hidden;
}
.collapse.in {
  height: 200px;
}

JS：

var readBlock = $('p');

$("#read-more-1").click(function() {

  if (readBlock.hasClass("in")) {
    readBlock.removeClass('in');
  } else {
    readBlock.addClass("in");
  }

});

CODEPEN

Answer 2

折叠类是不必要的。您只需要切换高度即可触发过渡。此外，文本需要是块元素才能尊重 height 属性

$(document).ready(function() {

$("#read-more-1").click(function(){
      $("#read-block-1").toggleClass('in');
   })
})

.collapsable {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 1s ease;
    display: block;
}

.collapsable.in {
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>A rare Peking glass tripod censer, Qianlong Period, of stout globular form with carved lion and ring handles, tripod stylized animal head feet and waisted neck rising to a rim with bail handles, the  <span class="collapsable" id="read-block-1">ring band, hardwood fitted base and cover with agate finial. Provenance:Previously from the collection of Carl Lindgren (1843-1871) a Swedish Sea Pilot and Businessman Carl Lindgren (1843-1871). He came to Taku close to Tianjin in 1863, at that time China's most important port north of Shanghai. Due to health problems Carl Lindgren left China in November 1870 and died in London during the spring 1871. This glass censer was among the things collected by his family after his death. By descent within the family. From a Montreal Collector Lot notes:"A new chapter in the history of Chinese glassmaking began in 1696, the thirty-fifth year of the reign of Kangxi, when a glass factory was established within the imperial city in Beijing under the direction of the Jesuit missionary Kilian Stumpf (1655-I720). The type of glass produced there, of which this vase is an example, was subsequently known in the West as Peking glass. Craftsmen were recruited from Boshan, the traditional center of glassmaking in China, and from Guangzhou (Canton). The workshop's peak period, in both quantity and quality of its wares, was between 1740 and 1760, in the early reign of the Qianlong emperor. Palace records show that Jesuits with expertise in certain Western glassmaking techniques were active in the workshop at this time. After 1760, glass production in the palace workshop declined rapidly, as did the quality of the wares." -Metropolitain Museum New York Bulletin. 3269166.pdf.bannered.pdf</span></p>
                              <a id="read-more-1">read more</a>

Answer 3

只需使用 BS collapse.js 插件。这就是它的用途。

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>A rare Peking glass tripod censer, Qianlong Period, of stout globular form with carved lion and ring handles, tripod stylized animal head feet and waisted neck rising to a rim with bail handles, the
  <div class="collapse" id="collapseExample">
    ring band, hardwood fitted base and cover with agate finial. Provenance:Previously from the collection of Carl Lindgren (1843-1871) a Swedish Sea Pilot and Businessman Carl Lindgren (1843-1871). He came to Taku close to Tianjin in 1863, at that time China's most important port north of Shanghai. Due to health problems Carl Lindgren left China in November 1870 and died in London during the spring 1871. This glass censer was among the things collected by his family after his death. By descent within the family. From a Montreal Collector Lot notes:"A new chapter in the history of Chinese glassmaking began in 1696, the thirty-fifth year of the reign of Kangxi, when a glass factory was established within the imperial city in Beijing under the direction of the Jesuit missionary Kilian Stumpf (1655-I720). The type of glass produced there, of which this vase is an example, was subsequently known in the West as Peking glass. Craftsmen were recruited from Boshan, the traditional center of glassmaking in China, and from Guangzhou (Canton). The workshop's peak period, in both quantity and quality of its wares, was between 1740 and 1760, in the early reign of the Qianlong emperor. Palace records show that Jesuits with expertise in certain Western glassmaking techniques were active in the workshop at this time. After 1760, glass production in the palace workshop declined rapidly, as did the quality of the wares." -Metropolitain Museum New York Bulletin. 3269166.pdf.bannered.pdf
  </div>
</div>
<a type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  read more
</a>

Answer 4

可以在父容器上设置溢出，使用line-height来控制容器的高度和行数。

您可以使用 max-height 代替 height，因此它不会增长到超出需要的范围。

最后，只需切换要添加高度或最大高度的类。

例子

$(document).ready(function() {

  $("#read-more-1").click(function() {
    $(".collapse").toggleClass('in');
  })
})

p {
  max-height: 1.6em;
  line-height: 1.6em;
  padding: 0;
  overflow: hidden;
  transition: max-height 1s ease;
}
.in {
  max-height: 48em;/* 1.6 x lines max here an average 30 lines */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="collapse">A rare Peking glass tripod censer, Qianlong Period, of stout globular form with carved lion and ring handles, tripod stylized animal head feet and waisted neck rising to a rim with bail handles, the ring band, hardwood fitted base and cover with agate
  finial. Provenance:Previously from the collection of Carl Lindgren (1843-1871) a Swedish Sea Pilot and Businessman Carl Lindgren (1843-1871). He came to Taku close to Tianjin in 1863, at that time China's most important port north of Shanghai. Due to
  health problems Carl Lindgren left China in November 1870 and died in London during the spring 1871. This glass censer was among the things collected by his family after his death. By descent within the family. From a Montreal Collector Lot notes:"A
  new chapter in the history of Chinese glassmaking began in 1696, the thirty-fifth year of the reign of Kangxi, when a glass factory was established within the imperial city in Beijing under the direction of the Jesuit missionary Kilian Stumpf (1655-I720).
  The type of glass produced there, of which this vase is an example, was subsequently known in the West as Peking glass. Craftsmen were recruited from Boshan, the traditional center of glassmaking in China, and from Guangzhou (Canton). The workshop's
  peak period, in both quantity and quality of its wares, was between 1740 and 1760, in the early reign of the Qianlong emperor. Palace records show that Jesuits with expertise in certain Western glassmaking techniques were active in the workshop at this
  time. After 1760, glass production in the palace workshop declined rapidly, as did the quality of the wares." -Metropolitain Museum New York Bulletin. 3269166.pdf.bannered.pdf</p>
<a id="read-more-1">read more</a>