javascript - 在焦点上动画绘制 SVG 形状的最简洁方法是什么？

Question

我一直在为一个网站做这个(看似)简单的小改进太久了，我决定寻求帮助。

我希望我的联系表单字段的轮廓以动画形式围绕焦点输入区域绘制，如本视频中所示 http://tinypic.com/r/ofrb4h/9

我已经想出了一种使 svg 动画化的方法，但没有找到如何将其放在我的表单顶部的方法，而且我只是不确定这是否是最好的方法。

这是 html 代码和与之配套的 CodePen:

<div class="container-div">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444 501" class="blue">
        <path class="outline-path" id="outline" fill="none" stroke="teal" stroke-width="3"
         d="M 385.00,193.50
            C 404.00,195.75 406.25,228.00 385.25,230.75
              385.25,230.75 67.00,230.25 67.00,230.25
              46.50,228.75 45.25,197.25 67.25,193.25
              67.25,193.25 385.00,193.50 385.00,193.50 Z" 
         />
    </svg>
</div>

<form class="contact-form">
    <div class="form-group">
        <p>Name:</p> <label for="name">Full Name</label>
        <input type="text" class="form-inline name-input" name="name"
            id="name" placeholder="Cal Critter" oninput="nameFunction()"/>
        <br>

        <p>Email:</p> 
        <label for="email">Email</label>
        <input type="email" class="form-inline email-input" name="email"
            id="email" placeholder="reachme@email.com" oninput="emailFunction()"/>
        <br>

        <p>Rough Budget:</p>
        <div class="selectdiv"><label for="budget">Budget</label><select name="budget" id="budget"
                class="budget-input">
                <option class="select-dropdown" value="Less Than $5,000" selected>Less Than $5,000</option>
                <option class="select-dropdown" value="$5,000 - $20,000">$5,000 - $20,000</option>
                <option class="select-dropdown" value="$20,000 - $50,000">$20,000 - $50,000</option>
                <option class="select-dropdown" value="$50,000 - $100,000">$50,000 - $100,000</option>
                <option class="select-dropdown" value="$100,000 - $500,000">$100,000 - $500,000</option>
                <option class="select-dropdown" value="More Than $500,000">More Than $500,000</option>
                <option class="select-dropdown" value="?">?</option>
            </select>
        </div>
        <br>

        <p>Message:</p> 
        <label for="message">Message</label>
        <textarea class="form-inline  message-input" name="message"
            id="message" rows="10" cols="30" placeholder="Tell us a little about your project here..."
            oninput="messageFunction()">
        </textarea>
    </div>
    <button class="" type="submit">SEND</button>
</form>

https://codepen.io/AshleyMSherwood/pen/bREawx

如果有任何建议，我将不胜感激

提前致谢!

Answer 1

要触发焦点效果，您可以使用此代码。

var inputBox = document.querySelector('input');
inputBox.addEventListener('focus', function(){
   document.querySelector('path').classList.add('outline-path');
   document.querySelector('.container-div').style.display = "block";
})

添加此代码以消除对“模糊”的影响。

inputBox.addEventListener('blur', function(){
   document.querySelector('.container-div').style.display = "none";
   document.querySelector('path').classList.remove('outline-path');
})