时间戳

首页 > 解决方案 > 如何将过渡添加到阅读更多代码

javascript - 如何将过渡添加到阅读更多代码

问题描述

我对 CSS 和 javascript 很陌生。在过去的 3 个小时里，我一直在尝试向此代码添加过渡。这是一个“阅读更多”功能。

我希望不仅有人最终可以帮助我添加过渡，而且我可以学习一些关于 CSS 和 javascript 的知识:)

    function readMore(nr) {
    let dots = document.querySelector(`.card[data-nr="${nr}"] .dots`);
    let moreText = document.querySelector(`.card[data-nr="${nr}"] .more`); 
    let btnText = document.querySelector(`.card[data-nr="${nr}"] .myBtn`);
    

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read more";
    moreText.style.display = "inline";
  }
}
.myBtn {
    background-color: transparent!important;
    color: #000000;
    border: none;
    font-family: Arial;
    cursor: pointer;
    font-size: 30px;
    text-align: center;
}
<html>
<body>

<div class="card" data-nr="1">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <span class="dots">...</span><span class="more" style="display: none;"> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat./span></p>

<button onclick="readMore('1')" class="myBtn">Read more</button>

</div>

</html>
</body>

我尝试将 .card { transition: max-height 0.7s;} 添加到 CSS 中。

标签： javascripthtmlcsscss-transitions

解决方案

有很多不是“伟大”或简单的选择。如果您使用jquery或 bootstrap 之类的库/框架，它们会提供实用程序来为您管理滑动大小转换。

这是因为要做到这一点，您需要使用 js 来计算和调整高度值。

一个不太健壮的方法是使用 max-height 和一个过渡来做到这一点。诀窍是你不能从 display:none; 这样的东西过渡。或可见性：隐藏；

function readMore(nr) {
  let p = document.querySelector(`.card[data-nr="${nr}"] p`);
  let btnText = document.querySelector(`.card[data-nr="${nr}"] .myBtn`);


  if (!p.classList.contains('collapse')) {
    p.classList.add('collapse');
    btnText.innerHTML = "Read more";
  } else {
    p.classList.remove('collapse');
    btnText.innerHTML = "Read more";
  }
}
.myBtn {
  background-color: transparent!important;
  color: #000000;
  border: none;
  font-family: Arial;
  cursor: pointer;
  font-size: 30px;
  text-align: center;
}

p {
  overflow: hidden;
  transition: max-height 0.7s;
  max-height: 100px;
}

p.collapse {
  max-height: 30px;
}
<html>

<body>

  <div class="card" style="margin-top: 50px;" data-nr="1">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <button onclick="readMore('1')" class="myBtn">Read more</button>

  </div>

</html>
</body>

推荐阅读