transition 联合 :focus 的使用

transition 联合 :focus 的使用

transition 用法

1. transition: property name | duration | delay

transition: width .8s .5s;

表示width属性变化时 过渡时间为0.8s 且延迟0.5s之后执行宽度变化

2. transition: property name | duration | timing function

transition: width .8s ease-in-out;

速度曲线

linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值

多个属性需要过渡效果（逗号隔开）

transition: height .8s, color .8s;

:focus

获得焦点改变其他元素的方法

element+element 选择器（相邻兄弟选择器）：可选择紧接在另一个元素后的元素，且二者有相同父元素。
例：h1+p{}：选择紧跟 h1元素的首个 p元素。

element1~element2 选择器：
例：p ~ ul：选择前面有p 元素的每个 ul元素。

CSS3 :not 选择器::not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

:focus 为输入框获得焦点 ， :valid 为输入框输入了值

实例

/* 输入框获得焦点事件 */
.layui-form-item input:focus+p,
.layui-form-item input:valid+p {
    /* color: rgb(238, 238, 99); */
    color: white;
    font-size: 18px;
    transition: color 0.8s, font-size 0.8s;
    -webkit-transition: color 0.8s, font-size 0.8s;
}