幅をアニメーションすると、内側の要素が未知の高さから飛び跳ねる

Question

私はそういうように矢印をアニメートしています。

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

}); 

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は基本的に、私は人々がホーブにできるようにしたいですボタンを押して、左から右に展開する異なる色の「成長する」矢印のアニメーションを取得します。私の問題は、クローンされた要素の「次の部分」のテキストが間違った位置から始まり、アニメーションが完了したときに必要な場所にジャンプすることです。

私が見つけた1つの一般的な修正は、オーバーフローをhiddenに設定していると思われますが、これを試してみると疑似要素が消えてしまいます。マージンとパディングの他の調整は効果がないようです。

どうしてこのようなことが起こり、どうすれば修正できますか？

Codepen

Answer 1

はそれを考え出しました。 Animateは、要素がエスケープするのを防ぐために、アニメーション中に「オーバーフロー：隠し」を適用します。 （！私は嫌い主な理由は、重要な、これがデフォルトをオーバーライドしている...しかし、それは事を崩壊全体を否定する）：

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

...誰が疑わしくハック-yとしながら、この問題に苦しんでこれを行うことについては、問題を是正する。