애니메이션 부트 스트랩 카드 제목 내용

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

업데이트로이 밖으로 시도 감사드립니다. 먼저 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으로 수직으로 애니메이션을 적용 할 수 없습니다.

당신이 할 수있는 일은 당신 만의 클래스를 사용하고 그것의 가시성 (fade in)을 움직이는 것입니다. 왼쪽에서 오른쪽으로 표시 할 수도 있습니다 (위에서는 표시하지 않을 수도 있음).

#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

이 코드 몇 가지 문제가 있습니다 귀하의 CSS를

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