如何向阅读更多代码添加过渡

Question

我是 CSS 和 javascript 的新手。在过去的 3 个小时里，我一直在尝试向这段代码添加一个转换。这是一个 'Read more' 函数。

我希望不仅有人可以最终帮助我添加过渡，而且我可以学到一些关于 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。

Answer 1

对此有很多不“好”或简单的选项。如果您使用像 jquery 或 bootstrap 这样的 library/framework，他们会提供实用程序来为您管理滑动大小转换。

这是因为要做到正确，您需要使用 js 计算并调整高度值。

一种不太稳健的方法是使用最大高度并在其上进行过渡。诀窍是你不能从 display:none; 之类的东西过渡。或 visibility:hidden；

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>

如何向阅读更多代码添加过渡

How to add a transition to a Read more code

html

javascript

css

css-transitions