1.transition 和 animation 的区别
1、animation是一个动画的效果,有多个中间帧,可以在任意一个中间帧设置状态,不需要设置触发事件就能执行。
transition是一个过渡的效果,没有中间状态,需要设置触发事件(如hover等)才能执行,只能触发一次;
2、animation 配合 @keyframe 可以不触发时间就触发这个过程,
而 transition 需要通过 hover 或者 js 事件来配合触发;
3、animation 可以设置很多的属性,比如循环次数,动画结束的状态等等
transition 只能触发一次;
4、animation 可以结合 keyframe 设置每一帧,
但是 transition 只有两帧,从 from … to;
5、在性能方面:浏览器有一个主线程和排版线程;主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程,而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;我们在用使用 aniamtion 的时候这样就可以改变很多属性,像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起,页面的回流和重绘,对性能影响就比较大,但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图,当然也就不会引起页面的重排了;
补充:css动画和js动画的区别
代码复杂度方面:
简单动画,css 代码实现会简单一些,js 复杂一些。
复杂动画的话,css 代码就会变得冗长,js实现起来更优。
动画运行时:
对动画的控制程度上,js 比较灵活,能控制动画暂停,取消,终止等;
css动画不能添加事件,只能设置固定节点进行什么样的过渡动画。
性能方面:
css动画相对于优一些,css 动画通过GUI解析;
js 动画需要经过j s 引擎代码解析,然后再进行 GUI 解析渲染。
css 有浏览器兼容问题,js 大多情况下是没有的。
2.visibility=hidden, opacity=0,display:none 区别
- opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些
事件,如 click 事件,那么点击该区域,也能触发点击事件的 - visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
- display=none把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。
3.怎么画一条 0.5px 的线
有两种方法
.line {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%; //scaleY Chrome/Safari的线都变虚了,加上就不会了
}
在移动端
<meta name="viewport" content="width=device-width,initial-sacle=1">
其中width=device-width表示将viewport视窗的宽度调整为设备的宽度,这个宽度通常是指物理上宽度。默认的缩放比例为1,如iphone 6竖屏的宽度为750px,它的dpr=2,用2px表示1px,这样设置之后viewport的宽度就变成375px。这时候0.5px的边就使用我们上面讨论的方法。
这样的话,viewport的宽度就是原本的750px,所以1个px还是1px,正常画就行,但这样也意味着UI需要按2倍图的出,整体面面的单位都会放大一倍。
在iPone X和一些安卓手机等dpr = 3的设备上,需要设置scale为0.333333,这个时候就是3倍地画了。