如何在Bootstrap 4卡片中实现文字从下往上展开效果

嘿，我来帮你搞定这个从下往上展开的动画效果！要实现这个需求，我们需要借助CSS过渡动画，给目标内容加个容器来精准控制它的显示状态，具体步骤如下：

修改HTML结构 #

首先，给你要展开的<p>标签套一个容器（比如命名为.expand-content），这样能更方便地控制动画逻辑：

<div class="col-xl-3 col-sm-6 mb-3">
  <div class="card text-white color4 o-hidden h-100">
    <div class="card-body">
      <div class="mr-5">
        <span class="float-left" style="min-width:280px;font-size:17px;">Tool</span>
      </div>
      <!-- 新增容器包裹要展开的内容 -->
      <div class="expand-content">
        <p>Contents i want this text to grow from bottom to top.</p>
      </div>
    </div>
    <div class="card-body-icon">
      <i class="fa fa-cogs" aria-hidden="true"></i>
    </div>
  </div>
</div>

添加CSS动画样式 #

接下来写核心的CSS，通过max-height过渡和transform-origin属性，实现从下往上的展开效果：

/* 初始状态：隐藏内容，设置动画原点在底部 */
.expand-content {
  max-height: 0;
  overflow: hidden;
  transform-origin: bottom;
  transition: max-height 0.5s ease-out; /* 0.5s是动画时长，可按需调整快慢 */
}

/* 触发动画的条件：这里用卡片hover作为示例 */
.card:hover .expand-content {
  max-height: 200px; /* 设置一个足够容纳内容的高度，比实际内容高即可 */
}

关键细节说明 #

• 为什么用max-height而不是height？因为CSS过渡不支持height: auto，用max-height可以模拟出高度变化的动画效果，只要设置的值比你内容的实际高度大就不会有问题。
• transform-origin: bottom是实现“从下往上”展开的核心，它把动画的起始点固定在容器底部，展开时内容会向上延伸。
• 触发方式可以灵活调整：如果不想用hover，你可以用JavaScript给卡片添加点击事件，切换一个展开类来触发动画，示例如下：

// 点击卡片切换展开/收起状态
document.querySelector('.card').addEventListener('click', function() {
  this.querySelector('.expand-content').classList.toggle('expanded');
});

对应的CSS要改成：

.expand-content.expanded {
  max-height: 200px;
}

内容的提问来源于stack exchange，提问作者Developer