svgで自動サイズ変更のテキストボックスを処理する

Question

私はほとんど完成しているウェブサイトを作っています。連絡先セクションを完了するだけです。私は入力のためのクールな小さなデザインを作ったし、彼らはうまくいく、ほとんどの部分。しかし今、私は類似しているはずのテキストエリアを作っていますが、そうではありません。私はautosizeプラグインを使用しています。ちょうどそれにすばやくグーグルサーチを渡すと、それが何であるかを知ることができます。テキストボックスのサイズを変更することはうまくいきますが、配置すると非常に奇妙になります。それと並んで、私はtextareaと共にそれを囲むsvgラインアニメーションのサイズを変更しようとしています。私はcodepen hereを掲示しました。ご覧のとおり、アニメーションは入力ボックスでうまくいきますが、テキストエリアボックスでは全く機能しません。私はそれを自分でフォーカスしてアニメーション化することができますが、今は私の心配は常にテキストエリアをほとんど囲むようにリサイズすることにあります。ここで

は、いくつかのコードです：

<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：あなたがアクションでそれを見たい場合は何らかの理由で自動サイズ調整のためには、codepenデモで動作していません、here's a link to the actual site。

別の編集：私はcodepenを動作させるようにしました。コードも更新しました。助けてください。

Answer 1

ここにはいくつかの問題があります。間違いなく、間違っているわけではありませんが、連携していません。 1つは、ラッパーと結合されたテキストエリアの位置です。それはサイジングを正確にしていますが、あなたはそれを定位置から外しています。

コードインスペクタで要素をハイライト表示し、その内容を確認します。あなたは、外見上、サイズが正しく変わっているのを見るでしょうが、外見上は外見上のようです。そのための修正は、位置の変更になります。

CSSでスクロールして変更を確認します。 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; 
} 

絶対環境がラッパーarond沿って回転させると、一番上にテキストエリアを強制します。この猫には多くのスキンケア方法がありますが、これはトリックを行うべきです。