Bootstrap 卡转换问题

Question

我有这样一张bootstrap卡：

.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 悬停时显示它，但由于某些原因，中间仍然有一个奇怪的垂直空白 space边界。我在这里做错了什么？ 如果 .task__content 通过变换缩放隐藏，为什么空的 space 仍然存在？

A live codepen example is here

Answer 1

根据你对边框部分的解释，它来自 class .card{ border: 1px solid rgba(0,0,0,.125);} 你可以超越它 .card{ border: none !important}... 高度是因为内联样式 d-flex 删除它，你可以用 height:0% 和悬停 height:100%

来操作它

Answer 2

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

所以要实现我要制作的效果，需要应用这样一段代码：

 @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的改变我可以减少空白space当.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-body填充所有边

.card-body{ padding: 1.25rem; }

只改变左右两侧

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

Bootstrap 卡转换问题

Transform Issue With Bootstrap Card

html

css

css-transforms

twitter-bootstrap

bootstrap-4