javascript - 我看不到我的动画，而是看到显示和隐藏效果之类的东西？

Question

我希望你们一切都好，我遇到了一个有趣的小问题，我将编写我的代码并稍后解释我想要实现的目标。

我有这样的 CSS :

.content-container-title {
   text-align: center;
   width:40%;
   transition:2.5 all ease;
   margin:140px 30% 0 30%;
   opacity:0;
}

.titleShown {
    opacity:1;
}


.content-container-title h2 {
    font-family: cuisine;
    font-size:50px;
    margin:0;
    text-shadow: 0 0 5px 0 rgba(0,0,0,1);
}

 .content-container-text {
     text-align:center;
     width:50%;
     opacity:0;
     margin:20px 25%;
     transition:2.7 all ease;
     overflow:hidden;
 }

 .textShown {
     opacity: 1;
 }


.content-container-text p {
      margin:0;
      font-family: cuisine;
      font-size:24px;
      opacity: 0.8;
}

和这样的 HTML 文件

<div id="slider-container"></div>
<button onclick="show()">Click</button>

我的 js 文件是:

 function show(){
 var elm = document.getElementById("slider-container");

 setTimeout(function(){
    sliders = [];
    sliders.push(stockSliders[index]); // this array contains only one 100% item

    contentSliders = "";
    for(let i=0; i<sliders.length; i++){
        contentSliders += '
          <div class="slider sliderShown absolute">
              <div class="img-container absolute">
                 <div class="img-content absolute">
                      <img src="'+stockSliders[index][3]+'" alt="">    
                 </div>
                 <div class="black-shadow absolute">
                 </div>
              </div>
             <div class="content-container absolute">'+
                '<div class="content-container-title">
                    <h2 class="c-white" >Lorem ipsum dolor sit amet.</h2>
                 </div>'+
                 '<div class="content-container-text">
                      <p class="c-white">Lorem ipsum dolor sit amet 
                                         consectetur adipisicing elit. 
                                         Debitis quas, id fuga dolorem 
                                         quaerat vero. Vitae expedita 
                                         nesciunt quis rem!
                      </p>
                  </div>
            </div>
        </div>';
        elm.innerHTML = contentSliders;
    }


    var paragraphs = document.getElementsByClassName("content-container-text");
    var titles = document.getElementsByClassName("content-container-title");

    setTimeout(function(){
        paragraphs[0].classList.add("textShown");
        titles[0].classList.add("titleShown");
    },5700)

},1300);

}

现在当我点击我的按钮时，我想要显示我的 div(content-container-text 和 content-container-title)，我明白了，但我希望它作为一种动画形式而不是仅仅拥有它弹出，如隐藏和显示效果，我在两个 div 中都有 css 属性“transition 2.7s all ease”，但我没有得到我不会得到的东西，我希望我的代码和解释是清楚的。

如有任何帮助，我们将不胜感激。

Answer 1

将 transition:2.5 all ease; 更改为 transition:2.5s all ease;