javascript - Animate Bootstrap 卡标题内容

Question

我有一个使用 Bootstrap 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>

我不知道如何使 headerContent 像 GitHub 上的语言统计栏一样具有动画效果。我该如何制作该动画？

谢谢

Answer 1

您的代码存在一些问题。首先，您正在寻找一种将 display 属性从 display: inline (Bootstrap 4 类 d-inline)动画化为 显示:无( Bootstrap 类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