アニメートブートストラップカードタイトル内容

Question

私はブートストラップ4を使用するウェブサイトを持っています。このウェブサイトでは、私はカードを使用しています。各カードにはタイトルが付いています。右側にいくつかのアイコンがあります。

ユーザーがアイコンをクリックすると、特定のコンテンツでタイトルをカバーしたいと思います。 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> 

私はGitHubの上の言語統計バーのようなheaderContentアニメーションを作成する方法がわかりません。どのようにアニメーションをやるのですか？

は

Answer 1

あなたのCSS更新することでこれを試してみてください、ありがとうございました。まず、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

Answer 2

はあなたのコードを持ついくつかの問題があります

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