如何使用动画调整元素高度和居中子元素？

Question

我正在为信使制作一些聊天控件（工具箱） 。 此工具用于打开/关闭聊天控件（相机、裁剪...）

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

我在点击它时卡住了。 当我点击打开时，工具箱会在动画开始之前跳下。 否则，当我再次单击关闭时，工具箱将首先跳起。

你能解释一下为什么以及我该如何解决吗？

Answer 1

您可以像下面这样更新中类：

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

并删除 CSS 的最后一部分。 跳跃主要是由于您设置为unset的line-height会在您切换类时被删除：

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

Answer 2

因为您正在使用“全部”进行 CSS 过渡。 我建议使用更具体的过渡，比如你想在点击图标时设置动画，这样你就可以使用宽度过渡而不是全部。

这是您更新的信使工具类。

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