比较炫酷的Input组件实现001

输入框样式

在网上看到了这样的一个输入框,感觉不错,学习一下,这里分析一下并实现它!
从图中,我们能看到他的基本组成,一个文本提示!上下各一个线条!以及输入框!
输入框的文本提示一般使用placeholder,但是placeholder的样式修改比较困难,并且不支持动画,而这里的提示文字是有动画的,所以不能使用placeholder,只能用标签来替换!
上下横线是反向运动,所以不可能是某一个元素的边框,只能是2个标签或者伪元素,
由于已经有了标签作为提示文字,所以input的placeholder不需要填写!图中还能看出input元素是没有背景色的,与整体的背景色保持一致!
首先是根据上面的分析做一个整体的架构!
一个input标签来接受用户输入,一个label来显示提示文字,由于提示文字需要有动画,所以在label标签中添加span标签来分离动画!然后为每一个元素设置css类!

看看现在是什么样的


有点简陋

根据情况设置样式

        .content {
            position: relative;
            margin: 2em 1em 1em;
            display: inline-block;
            width: 100%;
            max-width: 300px;
        }
        .input {
            position: relative;
            float: left;
            padding: 0.4em;
            width: 100%;
            box-sizing: border-box;
            outline: none;
            border: none;
            background: transparent;
            display: block;
        }
        .input_label {
            position: absolute;
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            top: 0;
            left: 0;
            font-size: 0.75em;
            text-align: left;
            padding: 0.403em;
        }
        .input_placeholder {
            position: relative;
            display: block;
            transition: transform 0.3s;
        }

基础样式设置好了以后可以看到这样的情况了


还是有点简陋

接下来设置上下边框,这里使用伪元素before和after

        .input_label::before, .input_label::after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: red;
            transition: transform 0.3s;
        }
        .input_label::before {
            top: 0;
        }
        .input_label::after {
            bottom: 0;
        }

然后再看看看效果!


有了上下边框!

动画分析:
从图中我们能看到,在Input标签获取焦点时有3个动画!提示文字上移,上面横条上移,下面横条下移!在input标签失去焦点,没有内容时回到原来的状态,在失去焦点有文字时,保持现有状态
第一个文字上移动
通过css选择器找到我们的提示文字 当.input类获取焦点以后,通过+选择器获取到label,在通过空格选择器找到span,然后做transform变化,在span标签的css中,我们已经为它设置了transition过渡效果!,所以就能平滑的看到变化了!

        .input:focus + .input_label .input_placeholder  {
            transform: translate3d(0, -2.5em, 0);
        }

在这里要注意下的是浏览器坐标,向下的是Y手,向上移动的化就需要-少Y轴的值!好了,现在看看效果


文字现在向上移动了

横条上下移动
接下来就是上下边框了!同理也是通过css3选择器找到有动画的内容!

        .input:focus + .input_label::before {
            transform: translate3d(0, -0.5em, 0);
        }
        .input:focus + .input_label::after {
            transform: translate3d(0, 0.5em, 0);
        }

看效果!


提示文字可以框选!不好

那么问题来了,提示文字可以框选!现在去掉框选

        .input_label {
            position: absolute;
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            top: 0;
            left: 0;
            font-size: 0.75em;
            text-align: left;
            padding: 0.403em;
            user-select: none;
        }

在.input_label中新增user-select为空,就能去掉框选了!

框选问题没了,新问题有来了

我们现在可以看到,框选虽然解决了,一个更加棘手的问题来了,不管怎样文字提示和边框都会在input标签失去焦点是回到原来的位置!
这里的一个解决思路是用2个css选择器控制同一个变换(transform)
实现的原理是:当同一个元素执行2个相同的变换(transform)时,这个变换(transform)只执行一遍(具体的我也不清楚,希望知道的人能告诉我为什么只执行一遍!)
就拿提示文字来说,现在的选择器方式是input标签获取焦点时找到它下面的label标签,再找到label标签中的span标签,我们把这个选择路径叫做A,A实际控制的是input标签获取焦点时的span标签,
我们现在需要一个选择路径B,B也要控制span标签,而且需要和A有相同的变换(transform),但是控制方式不一样,B要控制的是input中有内容时(或者没有内容时,这里使用有内容时的)的span标签,然后做相同的变换(transform),由于是同一个span标签并且变换(transform)相同,所以它只会执行一遍!
当选择路径A的span无效果时,如果选择路径B有效果,那span标签还是现有状态,不会回去到原来的位置!(上下横条同理)
所以我们就可以在input标签获取焦点是,给input标签的父标签或者下面的label标签的class属性新增一个hasVal(随便你自己设置)值,通过hasVal实现选择路径B,
这时就需要用到js来监听input的focus和blur事件,当input获取焦点时给input父标签或者下面的label标签新增一个hasVal类名,在blur中监听input是否有值,如果没有值就移除hasVal类名,这里为了方便,是用的是jquery!

        .input:focus + .input_label .input_placeholder ,
        .hasVal .input_placeholder {
            transform: translate3d(0, -2.5em, 0);
        }
        .hasVal::before,
        .input:focus + .input_label::before {
            transform: translate3d(0, -0.5em, 0);
        }
        .hasVal::after,
        .input:focus + .input_label::after {
            transform: translate3d(0, 0.5em, 0);
        }


这样就可以完整的实现了!

完整的实现了

其他实现思路

通过通过纯css选择器实现,不过这样有个不好的地方,就是需要浏览器支持input的required,同时这个input标签必须有内容才能通过form表单提交!

css解决问题!但是需要浏览器,同时input必须填写内容才能通过form提交

css样式如下 .hasVal .input_placeholder, #my_input2:valid + .input_label .input_placeholder, .input:focus + .input_label .input_placeholder { transform: translate3d(0, -2.5em, 0); } .hasVal::before, #my_input2:valid + .input_label::before, .input:focus + .input_label::before { transform: translate3d(0, -0.5em, 0); } .hasVal::after, #my_input2:valid + .input_label::after, .input:focus + .input_label::after { transform: translate3d(0, 0.5em, 0); }

新建一个my_input2,把他设置为required,在选择其中做合法新选择,就能实现相同的效果!

k6.gif

您也可以下载源码来查看!
同时欢迎大家指出错误,大家一起学习!

你可能感兴趣的:(比较炫酷的Input组件实现001)