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

通过更新你的css来试试这个

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

Answer 2

您的代码存在一些问题。首先，您正在寻找一种方法来将display属性从display: inline（Bootstrap 4 class d-inline）设置为display: none（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，因此您无法使用{{1}垂直设置动画。 }。

您可以做的是使用自己的类并为其可见性设置动画（淡入）。您也可以从左侧或右侧（但不是从顶部）显示它。

margin-top

Updated Fiddle

Animate Bootstrap卡标题内容

2 个答案: