Animate Bootstrap Card Title Content

Question

I have a website that uses Bootstrap 4. In this website, I'm using cards. Each card has a title. In the right hand side are some icons.

When a user clicks an icon, I want to cover the title with some specific content. I want to animate the content like the language stats bar on GitHub.

At this time, as shown in this Fiddle, I have the following:

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

I don't know how to make the headerContent animate like the language stats bar on GitHub. How do I do that animation?

Thank you

vic · Answer 1 · 2017-10-11T14:30:53.150

0

Try this out by update your css

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

edited Oct 11 '17 at 14:30

answered Oct 11 '17 at 14:25

vic

134
1
11

score 0 · Accepted Answer · answered Oct 11 '17 at 20:10

There are some issues with your code. Firstly, you are looking for a way to animate the display property from display: inline (Bootstrap 4 class d-inline) to display: none (Bootstrap class d-none), but the display property cannot be animated.

Of course, you could use a combination of opacity and visibility properties (as in my proposed solution below) to animate showing/hiding your header content, but then you come to your other issue. You want to animate the title to appear from the top but inline elements are not transformable elements, so you cannot animate them horizontally with transform: translateY(), but also they do not respect vertical margins, so you cannot vertically animate them with margin-top.

What you can do is to use your own classes and animate its visibility (fade in). You could also make it appear from the left or right (but not from the 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

Animate Bootstrap Card Title Content

2 Answers2