Question

$('.inf-read-btn').on('click', function() {
  // Find the container whose button was clicked
  var $container = $(this).closest('.inf-frame-text');
  // find the p inside it
  var $elem = $container.find('p');

  // toggle the p element for that container
  $elem.toggleClass('is-active');

  $('.inf-frame-text p').not($elem).removeClass('is-active');
});

.inf-frame-text {
  margin-top: 120px;
  &:first-child {
    margin-top: 0;
  }
  p {
    height: 62px;
    overflow: hidden;
  }
  p.is-active {
    height: 100%;
    overflow: visible;
  }
}

.inf-read-btn {
  display: block;
  color: #00ffbf !important;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inf-frame-text three">
  <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything
    that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. </p>

  <div class="inf-read-btn-grid three">
    <a class="inf-read-btn"> Read More + </a>
  </div>
</div>

大家好，在这里，当我们单击“ readmore”按钮时，文本将展开，但突然发生或突然发生。因此，我需要为此进行过渡。能帮我使用我的Java脚本代码吗？

Answer 1

使用此CSS，但将类添加到段落中，因为将CSS添加到P标签是不好的做法

.inf-frame-text {
    margin-top: 120px;
}
.inf-frame-text:first-child {
    margin-top: 0;
}
.inf-frame-text p {
    max-height: 62px;
    overflow: hidden;
    transition: 1s all ease-in;
    -webkit-transition: 1s all ease-in;
    -moz-transition: 1s all ease-in;
    -ms-transition: 1s all ease-in;
}
.inf-frame-text p.is-active {
    max-height: 1000px;
    overflow: visible;
}

Answer 2

因为您使用的是jQuery，请尝试以下操作：

$elem.animate({
   height: "toggle"
});

先不显示任何内联样式，所以当您单击jquery时会注意展开/折叠动画

扩展内容时如何进行过渡？

2 个答案: