How to resize element height and center child elements with animation?

I’m making some chat controls (toolbox) for a messenger. This tool is used to open/close chat controls (camera, crop…)

$(document).on('click', '.messenger-tools .tool-main', function (e) {     e.preventDefault();      $(this).find('*').toggleClass('fas fa-th').toggleClass('fas fa-times')         .closest('.messenger-tools').toggleClass('medium'); });
.messenger-tools {     position: fixed;     bottom: calc(42px + 20px);     right: calc(8px + 58px + 8px);     border-radius: 9999px;     white-space: nowrap;     overflow: hidden;     user-select: none;     height: calc(8px + 40px + 8px);     width: calc(8px + ((40px + 8px) * 3) + 8px);     line-height: calc(8px + 40px + 8px);     -webkit-transition: all 0.5s ease;     -moz-transition: all 0.5s ease;     -o-transition: all 0.5s ease;     transition: all 0.5s ease }  .messenger-tools .list-inline {     position: absolute;     right: 0;     margin-right: 8px }  .messenger-tools .list-inline .tool-item, .messenger-tools .list-inline .tool-main {     width: 40px;     height: 40px }  .messenger-tools .list-inline .tool-item [class^="fa"], .messenger-tools .list-inline .tool-main [class^="fa"] {     font-size: 13px }  .messenger-tools.medium {     height: 40px !important;     width: 40px !important;     line-height: unset !important }  .messenger-tools.medium .list-inline {     margin-right: 0 !important }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">  <div class="bg-white shadow-sm messenger-tools medium">     <div class="position-relative w-100 h-100">         <div class="list-inline">             <div class="list-inline-item">                 <button type="button" class="btn border rounded-circle bg-light shadow-sm tool-item">                     <i class="fas fa-camera text-dark"></i>                 </button>             </div>             <div class="list-inline-item">                 <button type="button" class="btn border rounded-circle bg-light shadow-sm tool-item">                     <i class="fas fa-crop-alt text-dark"></i>                 </button>             </div>             <div class="list-inline-item">                 <button type="button" class="btn border rounded-circle bg-light shadow-sm tool-main">                     <i class="fas fa-th text-dark"></i>                 </button>             </div>         </div>     </div> </div>

I’m stuck while clicking on it. When I click to open, toolbox will be jumped down before the animation starts. And otherwise, when I click again to close, toolbox will be jumped up first.

Can you please exaplain me why and how can I fix it?

Asked on September 1, 2020 in HTML.
Add Comment
2 Answer(s)

You can update the medium class like below:

.messenger-tools.medium {     width: calc(40px + 8px)!important;     box-shadow: 0 .125rem .25rem rgba(0,0,0,0)!important; } 

and remove the last part of the CSS. The jumping is mainly due to the line-height you are setting to unset that will get removed when you toggle the class:

$(document).on('click', '.messenger-tools .tool-main', function (e) {     e.preventDefault();      $(this).find('*').toggleClass('fas fa-th').toggleClass('fas fa-times')         .closest('.messenger-tools').toggleClass('medium'); });
.messenger-tools {     position: fixed;     bottom: calc(42px + 20px);     right: calc(8px + 58px + 8px);     border-radius: 9999px;     white-space: nowrap;     overflow: hidden;     user-select: none;     height: calc(8px + 40px + 8px);     width: calc(8px + ((40px + 8px) * 3) + 8px);     line-height: calc(8px + 40px + 8px);     -webkit-transition: all 0.5s ease;     -moz-transition: all 0.5s ease;     -o-transition: all 0.5s ease;     transition: all 0.5s ease }  .messenger-tools .list-inline {     position: absolute;     right: 0;     margin-right: 8px }  .messenger-tools .list-inline .tool-item, .messenger-tools .list-inline .tool-main {     width: 40px;     height: 40px }  .messenger-tools .list-inline .tool-item [class^="fa"], .messenger-tools .list-inline .tool-main [class^="fa"] {     font-size: 13px }  .messenger-tools.medium {     width: calc(40px + 8px)!important;     box-shadow: 0 .125rem .25rem rgba(0,0,0,0)!important; }  /*.messenger-tools.medium .list-inline {     margin-right: 0 !important }*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">  <div class="bg-white shadow-sm messenger-tools medium">     <div class="position-relative w-100 h-100">         <div class="list-inline">             <div class="list-inline-item">                 <button type="button" class="btn border rounded-circle bg-light shadow-sm tool-item">                     <i class="fas fa-camera text-dark"></i>                 </button>             </div>             <div class="list-inline-item">                 <button type="button" class="btn border rounded-circle bg-light shadow-sm tool-item">                     <i class="fas fa-crop-alt text-dark"></i>                 </button>             </div>             <div class="list-inline-item">                 <button type="button" class="btn border rounded-circle bg-light shadow-sm tool-main">                     <i class="fas fa-th text-dark"></i>                 </button>             </div>         </div>     </div> </div>

Add Comment

Because you are using ‘all’ for CSS transition. I suggest using more specific transition like you want to animate on click of the icon, so you can use width transition instead of all.

here is your updated messenger-tools class.

.messenger-tools {     position: fixed;     bottom: calc(42px + 20px);     right: calc(8px + 58px + 8px);     border-radius: 9999px;     white-space: nowrap;     overflow: hidden;     user-select: none;     height: calc(8px + 40px + 8px);     width: calc(8px + ((40px + 8px) * 3) + 8px);     line-height: calc(8px + 40px + 8px);     -webkit-transition: width 0.5s ease;     -moz-transition: width 0.5s ease;     -o-transition: width 0.5s ease;     transition: width 0.5s ease }

Answered on September 1, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.