分步指南 - 带动画的输入
分步指南 - 带动画的输入
HTML
对于 HTML，我们需要一个带有输入的容器和带有“编辑”svg 的按钮。
单击按钮将触发切换。
<div class="container">
<input type="text" class="input">
<button onclick="toggle()" class="edit">
<svg
xmlns="http://www.w3.org/2000/svg"
高度=“15”
填充=“无”
视图框="0 0 24 24"
中风="#02a8f4"
行程宽度=“2”>
<path
笔画线帽=“圆形”
笔划线加入=“圆形”
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</button>
</div>
Javascript
对于 javascript，我们将有一个存储按钮状态（编辑模式与否）的变量，我们将创建一个切换函数。
首先，我们将选择所有元素（按钮、输入和容器）并将编辑模式设置为与原来相反的模式（edit = !edit）。
现在，如果 edit 为真，我们将按钮的 svg 更改为检查图标，我们将聚焦输入并将“活动”类设置为它，我们将容器的边框颜色更改为浅绿色。
如果 edit 为 false，我们将按钮的 svg 设置回编辑图标并删除“活动”类，并将容器的背景颜色设置回蓝色。
让编辑=假 功能切换（）{
让 btn = document.getElementsByClassName('edit')[0]
让输入 = document.getElementsByClassName('input')[0]
让容器 = document.getElementsByClassName('container')[0] 编辑=！编辑 如果（编辑）{
btn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" height="15" fill="none" viewBox="0 0 24 24" stroke="#32ffcc" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>`
输入.焦点（）
input.classList.add('active')
container.style.borderColor = '#32ffcc'
} 别的 {
btn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" height="15" fill="none" viewBox="0 0 24 24" stroke="#02a8f4" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>`
input.classList.remove('活动')
container.style.borderColor = '#02a8f4'
}
}
CSS
对于 CSS，首先我们将为容器设置样式。我们将边框设置为蓝色，半径为 15 像素。
然后我们将使用 flexbox 对齐内部元素，并添加一些填充。
。容器 {
边框：1px 实心#02a8f4；
显示：弯曲；
边框半径：15px；
填充：5px；
}
对于按钮，我们将 paddings 设置为 0，并通过将 border 属性设置为 none 来删除默认边框。
我们还将删除默认背景颜色并将其设置为透明。
现在，我们将光标设置为指针，并使用 flexbox 在按钮的中心显示 svg。
按钮 {
填充：0；
边框：无；
背景颜色：透明；
光标：指针；
显示：弯曲；
证明内容：中心；
}
现在我们将为输入设置样式。我们将 paddings 和 width 设置为 0。这是非活动按钮的样式。
我们将背景属性设置为透明并删除默认边框并将其设置为 15 px 半径。
另外，让我们删除轮廓并添加一点过渡。
。输入 {
填充：0；
宽度：0；
背景颜色：透明；
边框：无；
边框半径：15px；
大纲：无；
过渡：0.5s；
}
现在是“活跃”类。当按钮处于活动状态时，此类将附加到输入元素。
我们将宽度设置为 100 像素（记住在我们将其设置为 0 之前）并添加一些 X 填充和右边距（输入和 svg 之间的一点空间）。
我们将添加一点过渡。
。积极的 {
宽度：100px；
填充：0 5px；
右边距：5px；
过渡：0.5s；
}
就是这样。
您可以找到视频教程和完整代码 这里 .
那你读书。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
