Animated Bootstrap Card Titel Inhalt

Question

Ich habe eine Website, die Bootstrap 4 verwendet. Auf dieser Website verwende ich Karten. Jede Karte hat einen Titel. Auf der rechten Seite sind einige Symbole.

Wenn ein Benutzer auf ein Symbol klickt, möchte ich den Titel mit einem bestimmten Inhalt abdecken. Ich möchte den Inhalt animieren, wie die Sprache-Statistikleiste auf GitHub.

Zu diesem Zeitpunkt, wie in diesen Fiddle gezeigt, ich habe folgenden:

<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> 

Ich weiß nicht, wie man die headerContent belebter wie die Sprache Statistiken bar auf GitHub. Wie mache ich diese Animation?

Danke

Answer 1

einige Probleme mit Ihrem Code Es gibt keine. Zunächst suchen Sie nach einer Möglichkeit, die display-Eigenschaft von display: inline (Bootstrap 4-Klasse d-inline) zu display: none (Bootstrap-Klasse d-none), aber the display property cannot be animated zu animieren.

Natürlich könnten Sie eine Kombination aus opacity und visibility Eigenschaften (wie in meiner vorgeschlagene Lösung unten) verwenden, um zu animieren Einblenden/Ausblenden Ihre Header Inhalts, aber dann kommen Sie zu Ihrem anderen Thema. Sie möchten den Titel von oben animieren, aber inline elements are not transformable elements, so dass Sie sie nicht horizontal mit transform: translateY(), sondern auch they do not respect vertical margins animieren können, sodass Sie sie nicht vertikal mit margin-top animieren können.

Sie können Ihre eigenen Klassen verwenden und ihre Sichtbarkeit animieren (einblenden). Sie können es auch von links oder rechts (aber nicht von oben) erscheinen lassen.

#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

Answer 2

diese css Ihre

von update ausprobieren

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