Die Animationsbreite bewirkt, dass das innere Element aus unbekannter Höhe aufspringt

Question

Ich animiere einen Pfeil so.

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

}); 

Grundsätzlich möchte ich Menschen in der Lage sein, um hove r über den Knopf und erhalte eine Animation mit einem "wachsenden" Pfeil in verschiedenen Farben, der sich von links nach rechts ausdehnt. Mein Problem ist, dass der "Next Section" -Text der geklonten Elemente an der falschen Stelle beginnt und an die Stelle springt, an der er sein muss, wenn die Animation abgeschlossen ist.

Eine gängige Lösung, die ich dafür gefunden habe, ist das Setzen von Überlauf auf versteckt, aber das Ausprobieren führt dazu, dass die Pseudoelemente verschwinden. Andere Anpassungen der Ränder und der Polsterung scheinen keine Auswirkungen zu haben.

Warum passiert das und wie kann ich es beheben?

Codepen

Answer 1

es herausgefunden. Animate wendet beim Animieren "overflow: hidden" an, um zu verhindern, dass Elemente sozusagen entwischen. Für alle anderen mit diesem Problem zu kämpfen, während questionably Hack-y (vor allem, weil ich hasse wichtig und das ist das Überschreiben der Standard ... aber es negiert die ganze Kollabieren Sache!), Dies zu tun:

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

.. Das Problem behoben.