动画宽度导致内部元素从未知高度跳起来

Question

我正在为箭头制作动画。

HTML

<div id="next-section" class="arrow"><p>Next Section</p></div>

CSS

#next-section p {
  text-transform: uppercase; 
  text-align:center;
  font-weight:bold;
}
#next-section {
  height:2em;
  width:10em;
  margin: 1.25em 0 1.25em 2em;
  line-height: 2.125em;
  position: relative;
  z-index:0;
  cursor: pointer;
  user-select: none;
}
#next-section.arrow {
  background-color: #fdb726;
  color:#54261a;
  height:2.15em;
}
#next-section.arrow:after, #next-section.arrow:before, #next-section.arrow.move-on:after, #next-section.arrow.move-on:before  {
  border-width: 1.063em 0 1.063em 1.063em;
}
#next-section.arrow:before {
  border-color: #fdb726 transparent;
  left: -1.063em;
  top: 0;
}
#next-section.arrow:after {
  border-color: transparent #fdb726;
  right: -1.063em;
  top: 0;
}
#next-section:before, #next-section:after   {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0;
}
#next-section.arrow.move-on, #next-section.arrow.move-on:before, #next-section.arrow.move-on:after {
  z-index:1;
}
#next-section.arrow.move-on {
  background:#54261a;
  color:white;
  right:2em;
  bottom:3.4em;
  width:0;
}
#next-section.arrow.move-on p {
  padding-bottom:1.25em;
}
#next-section.arrow.move-on:before {
  border-color:#54261a transparent;
}
#next-section.arrow.move-on:after {
  border-color:transparent #54261a;
}
#next-section.arrow.feather:before {
  border-color:#54261a transparent;
}

JS

 $(document).ready(function () {

  $.fn.arrowWipe = function() {
    var hoveredItem = $(this);
      var cloneItem = $(this)
        .clone()
        .addClass('move-on');
      hoveredItem.append(cloneItem);
  };

  $('#next-section').on({
    mouseenter: function() {
      $('#next-section').addClass('feather');
      $(this).arrowWipe();
      $('.move-on').animate({width:'100%'},300);
    },
    mouseleave: function(){
      $('#next-section').removeClass('feather');
      $('.move-on').remove();
    }
  });

});

基本上，我希望人们能够将鼠标悬停在按钮上并获得带有 "growing" 从左向右扩展的不同颜色箭头的动画。我的问题是克隆元素的 "Next Section" 文本从错误的位置开始，并在动画完成时跳到它需要的位置。

我发现的一个常见修复方法是将溢出设置为隐藏，但尝试这样做会导致伪元素消失。 margins和padding的其他调整似乎没有效果。

为什么会发生这种情况，我该如何解决？

Codepen

Answer 1

想通了。 Animate 在动画时应用 "overflow:hidden" 以防止元素转义，可以这么说。对于其他正在为这个问题而苦苦挣扎的人，虽然有问题的 hack-y（主要是因为我讨厌 !important 并且这会覆盖默认值......但它否定了整个崩溃的事情），这样做：

#next-section.arrow.move-on {
background:#54261a;
color:white;
right:2em;
bottom:3.4em;
width:0;
overflow:visible !important;
}

...最终纠正了这个问题。

动画宽度导致内部元素从未知高度跳起来

Animating width causes inner element to jump up from unknown height

javascript

css

jquery

jquery-animate