初识CSS动画与JS动画，强制同步布局

95 阅读 0 评论 63 点赞

我是靠谱客的博主孤独柠檬，最近开发中收集的这篇文章主要介绍初识CSS动画与JS动画，强制同步布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

CSS动画主要用到三个属性：

transition、animation、transform，通过这三个属性可以实现transition过渡：初始状态到终止状态的平滑过渡，animation动画：当前样式逐渐改为新样式，transform变换：改变某个元素形状、大小、位置。

JS动画

js动画要稍微灵活一些，使用setInterval() 方法定时循环改变元素样式，让画面动起来；使用clearInterval() 方法，可结束动画；使用offset的方法获取元素的现有状态，进行改变。多物体动画时，需给自己定义单独的初始值，使用this传值。

获取HTML标签的样式：

//获取html标签的样式
function getStyle(obj,attr){
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}else{//其他浏览器
return getComputedStyle(obj,false)[attr];
}
}
var obj1 = document.getElementById('id1');
getStyle(obj1,'width')

强制同步布局

使用js做动画时要避免发生强制同步布局，强制同步布局会严重影响动画的帧率，产生卡顿。