如何将淡出动画或其他任何动画从不显示显示应用于显示块？

Question

我提供了我用来在单击按钮时隐藏和显示阅读的更多文本的javascript代码，它工作得很好，但是现在客户希望该文本随任何动画一起显示和隐藏。我不知道该如何应用淡入淡出或滑动或其他方式将其显示给客户。我不知道该怎么做。

    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

确定，在这里我对您的代码进行了一些更改，以使用字体大小而不是显示，以应用过渡效果