Transform Issue With Bootstrap Card

user_11716688 0
Viewed 297

I have such a bootstrap card:

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

I want to hide a .task__content part via transform: scaleY(0) and to reveal it on .task hover, but for some reasons there remains a strange vertical empty space between borders. What am I doing wrong here? Why the empty space remains if .task__content is hidden via transform scale?

enter image description here

enter image description here

A live codepen example is here

bootstrap-4 twitter-bootstrap css-transforms css html
3 Answers

as per your explanation for the border part it's from class .card{ border: 1px solid rgba(0,0,0,.125);} you can over ride it .card{ border: none !important}... and for the height it's because the inline style d-flex remove it and you can manipulate it with height:0% and when hover height:100%

user_130295790

Ok, the issue is that transform: scaleY(0) is not affecting (like any other transform scales) the element's parent size and it's not affect an html elements flow on the page. That's why even if I hide an element via scaling, there is an extra empty space.

So to achieve the effect I want to create, I need to apply such a code:

 @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;
}

With display changing I can reduce the blank space when .task__content is hidden, with transform, keyframes and animation I still can apply a smooth revealing effect on hover.

user_117166880 

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

There is bootstrap card make card-body padding all side

.card-body{ padding: 1.25rem; }

Changes to both right and left only

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