Question

我正在制作一个几乎完整的网站，我只需要完成联系部分。我为输入设计了一个很酷的小设计，它们在大多数情况下运行良好。但现在我正在制作一个textarea，它应该是相似的，但不是。我正在使用自动调整大小的插件，只需给它一个快速的谷歌搜索，你会发现它是什么。它在调整文本框的大小方面做得很好，但它使定位非常奇怪。除此之外，我正在尝试调整围绕它的svg线动画以及textarea。我发布了一个codepen here。正如您所看到的，动画在输入框上运行良好，但在textarea框中根本不起作用。我可以自己制作焦点动画，但是现在我担心的是调整大小总是只是几乎不包围textarea。

以下是一些代码：

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

编辑：出于某种原因，如果您希望在代码工具演示中看到自动调整功能，here's a link to the actual site。

另一个编辑：我让codepen工作，我也更新了代码，使它看起来更好，但仍然无法正常工作。请帮忙。

Answer 1

这里有一些问题......好吧，不一定是错的，但不能一起工作。一个是textarea与包装材料相结合的定位。它确定了尺寸正确，但是你强迫它不合适。

使用代码检查器突出显示元素，并观察它的作用。你会看到尺寸似乎正在发生变化，但是它的位置不合适，这使它看起来很不合适。对此的修复将是一个位置变化。

在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;
}

使绝对环境围绕包装器旋转并强制textarea到顶部。有很多方法可以为这只猫提供皮肤，但这应该可以解决问题。

使用svg编制自动调整大小文本框

1 个答案: