小结
用transform搭配transition，line用div实现。一开始想通过改变元素width和translate偏移，发现两个变形不协调，不是中心开始，width和absolute的left则可行。后面改用scale缩放，可以从中心开始变化，代码量也少。button点击会有蓝色边框，是outline属性的原因，设置outline 0 或none
其他补充
再看其他人写的代码中，学习了一个新的东西，是HTML5中新的JS原生的class操作方法
HTML DOM classList 属性
详细请看HTML DOM classList 属性 | 菜鸟教程
具体看几个方法
增删改查
| 方法 | 描述 |
|---|---|
| add(class1,class2) | (增)在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加 |
| contains(class) | (查)返回布尔值，判断指定的类名是否存在。可能值： true - 元素包已经包含了该类名 false - 元素中不存在该类名 |
| item(index) | (查)返回类名在元素中的索引值。索引值从 0 开始。 如果索引值在区间范围外则返回 null |
| remove(class1,class2,...) | (删)移除元素中一个或多个类名。注意： 移除不存在的类名，不会报错。 |
| toggle(class, true or false) | (改)在元素中切换类名。 第一个参数为要在元素中移除的类名。 并返回 false。 如果该类名不存在则会在元素中添加类名，并返回 true。 第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如： 移除一个 class: element.classList.toggle("classToRemove", false); 添加一个 class: element.classList.toggle("classToAdd", true); 注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。 |
横线实现方法
共同属性 transition：name duration timing-function
①width为100%，高度固定的div(线) + transform 的 scaleX(0) --> scaleX(1)
②absolute的<hr>,变化<hr>的属性width和left代码
③伪元素实现线条，变化由属性width 0 100%实现
网友评论