引导卡的转换问题

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>

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

A live codepen example is here

Answer 1

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

Answer 2

好的，问题是transform: scaleY(0) 不会影响（与任何其他变换比例一样）元素的父大小，并且不会影响页面上的 html 元素流。这就是为什么即使我通过缩放隐藏元素，也会有额外的空白空间。

所以要实现我想要创建的效果，我需要应用这样的代码：

 @keyframes transformScale {
  0% {
    transform: scaleY(0);

    opacity: 0;
    visibility: hidden;
  }
  100% {
    transform: scaleY(1);

    opacity: 1;
    visibility: visible;
  }
}

.task {
  border: none;
}

.task__content {
  display: none;

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

  border: 1px solid rgba(0, 0, 0, 0.125);

  opacity: 0;
  visibility: hidden;
}

.task:hover .task__content {
  display: flex;

  animation: transformScale 0.2s linear 0.2s forwards 1;
}

更改display 可以减少隐藏.task__content 时的空白区域，使用transform、keyframes 和animation 我仍然可以在悬停时应用平滑的显示效果。

Answer 3

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

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

.task:hover .task__content {
  transform: scaleY(1);
}
.card-body{
  padding: 0 1.25rem !important;
}

<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>

有bootstrap card让card-body边补边

.card-body{ padding: 1.25rem; }

仅左右变化

.card-body{ padding: 0 1.25rem; }