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();
    }
  });

});

基本上，我希望人们能够将鼠标悬停在按钮上，并获得一个动画，其中包含从左到右扩展的不同颜色的“增长”箭头。我的问题是克隆元素的“Next Section”文本从错误的位置开始，然后跳到动画完成时需要的位置。

我发现的一个常见修复方法是将溢出设置为隐藏，但尝试此操作会导致伪元素消失。其他边距和填充的调整似乎没有效果。

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

Codepen

Answer 1

想出来。 Animate在动画时应用“overflow：hidden”，以防止元素逃逸，可以这么说。对于其他任何正在努力解决这个问题的人来说，虽然可疑的是hack-y（主要是因为我讨厌！重要而且这超越了默认值......但它否定了整个崩溃的事情），这样做：

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

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

动画宽度会导致内部元素从未知高度跳跃

1 个答案: