Animate Bootstrap Card標題內容

我有一個使用Bootstrap 4的網站。在本網站中，我使用的是卡片。每張卡都有一個標題。在右邊是一些圖標。Animate Bootstrap Card標題內容

當用戶點擊一個圖標時，我想用一些特定的內容來覆蓋標題。我想動畫像GitHub上的語言統計欄那樣的內容。

此時，如本Fiddle所示，我有以下幾點：

<div class="container"> 
    <div class="card"> 
    <div class="card-header"> 
     <div class="row"> 
     <div class="col-9"> 
      Card Title  
      <div id="headerContent" class="d-none"> 
      This is content I want to animate in from the top.   
      </div> 
     </div> 
     <div class="col-3"> 
      <i class="fa fa-folder-open-o fa-lg float-right" onclick="toggleHeaderContent()"></i> 
     </div> 
     </div> 
    </div> 

    <div class="card-body"> 
     <h4 class="card-title">Special title treatment</h4> 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
     <a href="#" class="btn btn-primary">Go somewhere</a> 
    </div> 
    </div> 
</div>

我不知道如何使headerContent動畫像GitHub上的語言統計數據吧。我該如何做動畫？

謝謝

來源

2017-10-11 Zach Templeton

嘗試了這一點通過更新有一些問題與您的代碼。首先，您正在尋找一種方法將display屬性從display: inline（引導程序4類d-inline）設置爲display: none（引導程序類d-none），但the display property cannot be animated。

當然，你可以（在下文中我所提出的解決方案）使用的opacity和visibility特性相結合的動畫顯示/隱藏你的頭的內容，但隨後你來你的其他問題。您想要將標題製作爲從頂部出現但inline elements are not transformable elements，因此您無法使用transform: translateY()水平製作動畫，但也可以使用they do not respect vertical margins，因此您無法使用margin-top垂直製作動畫。

你可以做的是使用你自己的類和動畫的可見性（淡入）。你也可以使它從左或右出現（但不是從頂部）。

#headerContent { 
    display: inline; 
} 

.is-hidden { 
    visibility: hidden; 
    opacity: 0; 
    transform: translateY(-100px); 
} 

.is-visible { 
    visibility: visible; 
    opacity: 1; 
    transform: translateY(0); 
    transition: all 0.3s ease-out; 
}

Updated Fiddle

來源

2017-10-11 20:10:18

你的CSS

.your-title{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

來源

2017-10-11 14:25:50 vic

Animate Bootstrap Card標題內容

回答

相關問題