记得一个流畅的动画测试如何让动画看起来更流畅更流畅？核心概念其实就是帧数稳定在60帧左右。本次不讨论使用raf实现流畅的帧动画。我们会讨论不依赖raf让一些已有的动画更流畅，即平均帧数接近60帧。1.侧滑实验本实验以左侧导航栏飞入开关开始，使用left和transform进行对比实验。现在普遍认为transform的性能优于改变position，因为可以减少页面重排。相关属性代码1.tansfrom:tanslateX(-100%);transition：变换1s线性；和2.left:-100px;过渡：左1s线性；由于页面结构并不复杂，动画也很简单，帧数基本在60左右，但是如果加上will:change属性，或者transform:translateZ(0)，也就是GPU引擎加速，你可以少量提高帧率的稳定性，但效果不明显。因此得出结论，在简单的基础页面中，使用left或者transform改变dom位置的简单切换动画对动画的连贯性影响不大。由于在简单的页面上看不出transform的优越性，所以我们需要更复杂的页面和更复杂的动画来继续测试2.复杂动画测试这次我在smoothing实验代码的基础上做了改动，在每个html结构中都添加了一些到框，并添加了边距以使其能够增加页面容量。同时改进了动画效果，转场开关直接改为动画动画。css动画：测试0.2s线性交替10；@keyframestest{from{/*transform:translateX(-100%);*/左：-600px；}to{/*转换：translateX(100%);*/左：600px；}}html
