如何保持動畫後的元素永久爲100％ - C

Question

我正在製作模態，其內部內容像列表需要在其打開時從底部逐一出現。我設法做到了，但問題是我沒有弄清楚如何讓內容隱藏起來或隱藏起來，並在動畫之後出現。

Here is Js Fiddle

PLZ，讓我知道是一團糟在CSS如果任何或建議的方式。

代碼婁對堆棧的需求（摘錄沒有采取引導源文件）：

li { transition: transform 1s, opacity 1s; animation-name: list-live; animation-duration: 3s; animation-iteration-count:1; } 
 
li:first-child { animation-delay:100ms; } 
 
li:nth-child(2) { animation-delay:300ms;} 
 
li:nth-child(3) { animation-delay:500ms;} 
 
li:nth-child(4) { transition: transform 1s, opacity 4s; animation-delay: 700ms; } 
 
@keyframes list-live { 
 
\t 0% { transform: translate(0, 200px); opacity: 0;} 
 
    100% { transform: translate(0, 0); opacity:1;} 
 
}

<!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <ul> 
 
      <li class="tr1">Item 1</li> 
 
      <li class="tr2">Item 2</li> 
 
      <li class="tr3">Item 3</li> 
 
      <li class="tr4">Item 4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

試試這個代碼。我編輯了你的css代碼。

li { 
    transition: all .5s; 
    animation:list-live linear 2s forwards; 
    opacity: 0; 
} 
.modal-content { 
     overflow: hidden; 
} 
li:first-child { animation-delay:100ms; } 
li:nth-child(2) { animation-delay:300ms;} 
li:nth-child(3) { animation-delay:500ms;} 
li:nth-child(4) { animation-delay: 700ms; } 
@keyframes list-live { 
    0% { transform: translateY(200px); opacity: 0;} 
    100% { transform: translateY(0); opacity:1;} 
}