Ausarbeiten von Textfeld automatisch ändern mit Svg

Question

Ich mache eine Website, die fast abgeschlossen ist, muss ich einfach den Kontaktabschnitt zu beenden. Ich habe ein cooles kleines Design für die Eingänge gemacht und sie funktionieren größtenteils gut. Aber jetzt mache ich eine Textarea, die ähnlich sein sollte, aber nicht ist. Ich benutze das Autosize-Plugin, geben Sie einfach eine schnelle Google-Suche und Sie werden herausfinden, was es ist. Es ist gut in der Größe der Textbox, obwohl es mit der Positionierung sehr seltsam macht. Daneben versuche ich, die Größe der Svg-Linienanimation, die sie umgibt, mit der Textfläche zu ändern. Ich habe einen Codepen here gepostet. Wie Sie sehen können, funktioniert die Animation gut auf dem Eingabefeld, aber es funktioniert überhaupt nicht in der Textbereich-Box. Ich kann es selbst fokussieren lassen, aber im Moment liegt meine Sorge in der Größenanpassung, um das Textarea immer nur knapp zu umgeben.

Hier einige Code:

<div class="svg-wrapper-input"> 
    <svg height="60" width="277" xmlns="http://www.w3.org/2000/svg"> 
    <rect class="shape-input" height="60" width="277" /> 
    </svg> 
    <input class="text" placeholder="E-Mail Address"> 
    </input> 
</div> 

<div class="svg-wrapper-input"> 
    <svg class="textarea" height="200" width="277" xmlns="http://www.w3.org/2000/svg"> 
    <rect class="shape-input" height="200" width="277" /> 
    </svg> 
    <textarea class="text message" placeholder="Message"></textarea> 
</div> 

---

body { 
    background: #161616; 
} 

.shape-input { 
    fill: transparent; 
    stroke-dasharray: 279 394; 
    stroke-dashoffset: 337; 
    /*stroke-dasharray: 320; 
    stroke-dashoffset: -474;*/ 
    stroke-width: 2px; 
    stroke: #19f6e8; 
    -webkit-animation: 0.8s draw-out-input ease forwards; 
    -moz-animation: 0.8s draw-out-input ease forwards; 
    -o-animation: 0.8s draw-out-input ease forwards; 
    animation: 0.8s draw-out-input ease forwards; 
} 

.svg-wrapper-input { 
    height: 60px; 
    margin: 0 auto; 
    padding: 5px 0; 
    width: 277px; 
    display: block; 
    text-decoration: none; 
} 

input { 
    outline: none; 
    border: 0px; 
    background: transparent; 
    letter-spacing: 2px; 
    padding-left: 25px; 
    padding-right: 25px; 
    width: 227px; 
} 

@keyframes draw-in-input { 
    0% { 
     stroke-dasharray: 279 394; 
     stroke-dashoffset: -337; 
    } 
    100% { 
     stroke-dasharray: 760; 
     stroke-dashoffset: 0; 
    } 
} 

@keyframes draw-out-input { 
    0% { 
     stroke-dasharray: 760; 
     stroke-dashoffset: 0; 
    } 
    100% { 
     stroke-dasharray: 279 394; 
     stroke-dashoffset: -336; 
    } 
} 

.svg-wrapper:hover .shape { 
    -webkit-animation: 0.5s draw-in ease forwards; 
    -moz-animation: 0.5s draw-in ease forwards; 
    -o-animation: 0.5s draw-in ease forwards; 
    animation: 0.5s draw-in ease forwards; 
} 

.input-active { 
    -webkit-animation: 0.8s draw-in-input ease forwards; 
    -moz-animation: 0.8s draw-in-input ease forwards; 
    -o-animation: 0.8s draw-in-input ease forwards; 
    animation: 0.8s draw-in-input ease forwards; 
} 

.text { 
    color: #fff; 
    font-family: 'Montserrat'; 
    font-size: 16px; 
    letter-spacing: 8px; 
    line-height: 60px; 
    position: relative; 
    top: -64px; 
    margin: 0; 
} 

textarea { 
    border: 0; 
    outline: none; 
    background: transparent; 
    padding-left: 25px; 
    letter-spacing: 2px !important; 
    padding-right: 25px; 
    padding-top: 25px; 
    width: 227px; 
    top: -202px !important; 
    resize: none; 
    overflow: auto; 
    line-height: 20px !important; 
} 

---

$(".svg-wrapper-input > input").focus(function() { 
    $(this).siblings("svg").children(".shape-input").toggleClass("input-active"); 
}); 

$(".svg-wrapper-input > input").focusout(function() { 
    $(this).siblings("svg").children(".shape-input").toggleClass("input-active"); 
}); 

autosize($('textarea')); 
$('.message').keydown(function(){ 
    var msgHeight = $('.message').height(); 
    $('.textarea').attr('height', msgHeight); 
    $('.textarea > .shape').attr('height', msgHeight); 
}); 

EDIT: Aus irgendeinem Grund Autosize wird nicht in codepen Demo funktioniert, wenn Sie es in Aktion sehen wollen , here's a link to the actual site.

ANDERE EDIT: Ich habe den Codepen zu arbeiten, habe ich auch den Code aktualisiert, so sieht es besser aus, aber immer noch nicht richtig funktioniert. Bitte helfen Sie.

Answer 1

Es sind ein paar Dinge hier falsch ... naja, nicht unbedingt falsch, aber nicht zusammen arbeiten. Einer ist die Positionierung des Textfelds in Kombination mit dem Wrapper. Es wird die Dimensionierung korrekt, aber Sie zwingen es aus der Position.

Markieren Sie das Element mit dem Code-Inspektor und beobachten Sie, was es tut. Sie werden sehen, dass sich die Größe scheinbar richtig ändert, aber es ist nicht in der richtigen Position, wodurch es scheinbar aus ist. Die Lösung dafür wäre eine Positionsänderung.

Scrollen Sie im CSS nach unten, um die Änderungen zu sehen. http://codepen.io/mattkenefick/pen/LZWYQZ

/** 
* Modifications to make it fit 
*/ 
.svg-wrapper-input { 
    position: relative; 
} 

.svg-wrapper-input textarea { 
    position: absolute; 
    top: 0 !important; 
} 

Machen Sie die absolute Umgebung arond die Hülle drehen und das Textfeld an die Spitze zu erzwingen. Es gibt viele Möglichkeiten, diese Katze zu häuten, aber das sollte den Trick machen.