如何將漸變 animation 或任何其他 animation 從顯示無應用到顯示塊？

Question

我已經提供了 javascript 代碼，我用它來隱藏並在單擊按鈕時顯示閱讀更多文本，它工作得很好，但現在客戶希望文本應該與任何 animation 一起顯示和隱藏。 我不知道我應該應用淡入淡出或幻燈片或其他東西來向客戶展示它。 我不知道該怎么做。

 function ReadmoreFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more-text"); var btnText = document.getElementById("readMoreBtn"); 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 less"; moreText.style.display = "inline"; } }

 #more-text{ display: none; transition: 2s; } #readMoreBtn{ background: #ff963b; color: #fff; border:1px solid #ff963b; border-radius: 5px; padding: 7px 5px; }

 <div class="category-description std"> <h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></h2> <p style="text-align:=justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur sodales erat luctus blandit. Vestibulum rutrum tellus fermentum massa pharetra maximus. Morbi sit amet metus vel massa tempus iaculis. Ut sit amet ligula dolor. Nam a sem at est sagittis volutpat. Vestibulum dapibus et orci eu placerat. Suspendisse placerat quis elit sed fringilla. Praesent finibus vestibulum augue in auctor. Etiam interdum dolor mi, ut facilisis magna malesuada ut. Fusce sed eros nibh.</p><span id="dots"></span> <span id="more-text"> <h2 style="text-align:=justify;"><strong>**Get best quality art and craft supplies within your budget**</strong></h2> <p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p> <h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </strong></h2> <p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p></span> </div> <center><button onclick="ReadmoreFunction()" id="readMoreBtn">Read more</button></center>

Answer 1

好的，我對您的代碼進行了一些更改以使用字體大小而不是顯示來應用過渡效果

 function ReadmoreFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more-text"); var btnText = document.getElementById("readMoreBtn"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.fontSize = "0"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.fontSize = "initial"; } }

 #more-text{ font-size: 0; transition: 1s font-size; } #readMoreBtn { background: #ff963b; color: #fff; border:1px solid #ff963b; border-radius: 5px; padding: 7px 5px; }

 <div class="category-description std"> <h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></h2> <p style="text-align:=justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur sodales erat luctus blandit. Vestibulum rutrum tellus fermentum massa pharetra maximus. Morbi sit amet metus vel massa tempus iaculis. Ut sit amet ligula dolor. Nam a sem at est sagittis volutpat. Vestibulum dapibus et orci eu placerat. Suspendisse placerat quis elit sed fringilla. Praesent finibus vestibulum augue in auctor. Etiam interdum dolor mi, ut facilisis magna malesuada ut. Fusce sed eros nibh.</p><span id="dots"></span> <span id="more-text"> <h2 style="text-align:=justify;"><strong>**Get best quality art and craft supplies within your budget**</strong></h2> <p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p> <h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </strong></h2> <p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p> </span> <center><button onclick="ReadmoreFunction()" id="readMoreBtn">Read more</button></center> </div>