动画引导卡标题内容答案

【问题标题】：Animate Bootstrap Card Title Content动画引导卡标题内容
【发布时间】：2017-10-12 04:10:18
【问题描述】：

我有一个使用 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 上的语言统计栏一样动画。我怎么做那个动画？

谢谢

【问题讨论】：

标签： javascript css twitter-bootstrap

【解决方案1】：

您的代码存在一些问题。首先，您正在寻找一种将display 属性从display: inline（Bootstrap 4 类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 设置它们的动画，因此您无法使用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

【讨论】：

【解决方案2】：

通过更新你的 css 试试这个

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

【讨论】：