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（内容容器文本和内容容器标题），我得到了，但我希望它作为一种动画形式而不是仅仅拥有它弹出，像隐藏和显示效果，我有css属性＆＃39;过渡2.7s轻松＆＃39;两个div都有针对性，但我不知道我不会做什么，我希望我的代码和解释都很清楚。

非常感谢任何帮助。

Answer 1

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

我无法看到我的动画，而是获得了诸如节目和隐藏效果之类的东西？

1 个答案: