单击expand div with transition

Question

我正在制作一个div，它可以在单击时扩展其高度。我尝试了一些我已经在这里找到的方法，但对我来说都不起作用。

​

jQuery('.readMore').click(function() {
  jQuery(this).parent().toggleClass('rm-cont-hidden');
});

.rm-container {
  float: left;
  width: 100%;
  background: #f7f7f7;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 13px;
  color: #777;
}

.rm-text {
  float: left;
  width: 100%;
}

.rm-container.rm-cont-hidden .rm-text {
  max-height: 34px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.rm-container .rm-text {
  max-height: auto;
  transition: max-height 0.3s ease-in;
}

.readMore {
  float: left;
  width: 100%;
  color: blue;
  text-align: center;
  padding: 5px 0px 0px 0px;
  font-size: 16px;
}

.readMore:hover {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-4">


      <div class="rm-container rm-cont-hidden">

        <div class="rm-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
        <div class="readMore">
          +
        </div>

      </div>


    </div>
  </div>
</div>

​

我想让div“打开/展开”并进行转换。

Answer 1

toggleSlide()

使用jquery的滑动动画可以用于展开和折叠函数，也可以替代使用slideUp()或slideDown() (顺便说一句，这是一个冗长的过程)

Answer 2

不能将auto高度/宽度用于过渡。获得结果的最简单方法之一是设置一个精确值，以便使用过渡设置动画效果。检查此link以获取更多详细信息和其他选项以获取输出。请查看下面的代码片段以供参考。

​

jQuery('.readMore').click(function() {
  jQuery(this).parent().toggleClass('rm-cont-hidden');
});

.rm-container {
  float: left;
  width: 100%;
  background: #f7f7f7;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 13px;
  color: #777;
}

.rm-text {
  float: left;
  width: 100%;
}

.rm-container.rm-cont-hidden .rm-text {
  max-height: 34px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.rm-container .rm-text {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}

.readMore {
  float: left;
  width: 100%;
  color: blue;
  text-align: center;
  padding: 5px 0px 0px 0px;
  font-size: 16px;
}

.readMore:hover {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-4">


      <div class="rm-container rm-cont-hidden">

        <div class="rm-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
        <div class="readMore">
          +
        </div>

      </div>


    </div>
  </div>
</div>

​