用transition设置渐变，当焦点在input内时保持渐变后效果不变

今天写页面时，用到了transition来实现渐变。正常写法如血:

1
2
3
4
5
6
7
div{
   width:20px;
   transion:width 1s;
 }
div:hover{
  width:40px;
}

但是，当我把这个属性用到input上时，才发现了一个大问题，就是我的光标虽然还在input里面，
鼠标离开时，input框的大小也在渐变。这看着有点傻。怎么变呢？

后来发现，focus伪类也像上面这样使用。于是有了如下的代码，完美解决。

1
2
3
4
5
6
7
input{
  width:20px;
  transition:width 1s;
}
input:hover,input:focus{
  width:40px;
}

经测试，可以完美解决。都怪自己平时不认真看文档，导致用的时候糊里糊涂。下面我们一起看以下文档吧。
直接去看文档。也许
会有人和我一样懒，不想去看文档，所以，这里我也给大家摘抄了过来:

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。
可以看到，为transition指定的属性发生变化时，就会以动画的形式实现，动画变化的时间，正好是设置的时间。
所以input中，当鼠标过来时，hover时有的，里面我们放置的width发生了变化，而width正好就是我们需要变化的动画。
所以实现了渐变动画，离开同理width发生了变化。但在input处于focus状态时，鼠标离开同样会触发动画，解决方案
就是添加focus的css，控制变化，这样即使鼠标离开，不在其它地方点击，就不会发生这样的事情。