html - 引导卡的转换问题

Question

我有这样一张引导卡：

.task__content {
  transition: transform 0.2s linear 0s;

  transform: scaleY(0);
  transform-origin: top center;
}

.task:hover .task__content {
  transform: scaleY(1);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="task card" data-is-complete="incomplete">
  <div class="task__toolbar card-header d-flex align-items-center py-2">
    <!--task checklist-->
    <form class="task__form mr-3">
      <div class="task__form-block form-check"><input class="task__checkbox" type="checkbox" /></div>
    </form>
    <!--task title-->
    <div class="task__title">
      <p>Test Title</p>
    </div>
    <!--task btn bar-->
    <div class="task__btn-bar d-flex ml-auto">
      <!--expand button (optional - appears only if there is a task description)--><button class="task__descr-expand btn btn--iconed btn-sm" type="button"><span class="btn__icon--lg material-icons">expand</span></button>
      <!--edit task btn--><button class="task__edit btn btn--iconed btn-sm" type="button"><span class="btn__icon material-icons">edit</span></button>
      <!--delete task btn--><button class="task__del btn btn--iconed btn-sm" type="button"><span class="btn__icon material-icons">close</span></button></div>
  </div>
  <div class="task__content card-body d-flex align-items-center">
    <!--task description-->
    <div class="task__descr">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et</p>
    </div>
  </div>
</div>

我想隐藏一个.task__content部分transform: scaleY(0)并在悬停时显示它.task，但由于某些原因，边界之间仍然存在一个奇怪的垂直空白空间。我在这里做错了什么？如果通过变换比例隐藏，为什么空白空间仍然存在？.task__content

一个实时的 codepen 示例在这里

标签： htmlcsstwitter-bootstrapbootstrap-4css-transforms

Answer 1

根据您对边框部分的解释，它来自类.card{ border: 1px solid rgba(0,0,0,.125);}，您可以覆盖它.card{ border: none !important}...对于高度，这是因为内联样式d-flex将其删除，您可以height:0%在悬停时操作它height:100%