48.从按钮状态解决前端延时显示效果的问题

1. 在vue前端开发中我发现在设置按钮点击的color，然后跳转按钮到指定路由的界面的时候，发现设置的color并不会显示，这是由于移动端的延时的问题，在符合条件的情况下，路由已经跳到下一个界面，但是color还没有显示出来？

在网上找到的博客一般都是使用touchstart来替代click，但是在操作中我发现并不符合我的需求，最后我想到了改变按钮点击时的color来解决这个问题。

css中按钮有四种状态
1. 普通状态
2. hover 鼠标悬停状态
3. active 点击状态
4. focus 取得焦点状态 

 1、a:link{color:#fff}  未访问时的状态（鼠标点击前显示的状态）
 2、a:hover{color:#fff}  鼠标悬停时的状态
 3、a:visited{color:#fff}  已访问过的状态（鼠标点击后的状态）
 4、a:active{color:#fff}  鼠标点击时的状态
 5、a:focus{color:#fff}  点击后鼠标移开保持鼠标点击时的状态（只有在<a href="#"></a>时标签中有效

":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。
要注意的是:after和:before是一个新的元素，但是前面的link等知识同一个元素的不同状态