身为程序猿的我经常把transition、transform和translate这三者搞混,相信大多数程序猿也有同样的烦恼。既然如此我们就来探究探究。
先把这三者做一个简单解释:
- transform: 是 转换,描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix,而其中的位移的函数名叫translate,所以说,translate是transform的一部分。
- transition: 是 样式过渡,指的是某个CSS属性值如何平滑的进行改变,就是平常说的 动效。而transform是没有动画效果,你改变了它的值,元素的样子就改变了。
transform 转换
- 基本用法:
div {
width: 100px;
height: 100px;
background-color: #f40;
position: absolute;
/* 变换 转换 移动 旋转 缩放 扭曲 */
/* transform: translate(0px) rotate(10deg) scale(2,1) skew(45deg); */
/* translate在指定的坐标轴上移动 */
/* transform: translateZ(100px) rotateY(30deg); */
/* 元素在父容器中居中,可以不用知道子容器的宽高 */
left: 50%;
transform: translateX(-50%);
}
- transition通常和hover等事件配合使用
div:hover {
transform: translate3d(100px, 100px, 50px);
}
transition 过渡
- 基本用法:
transition 是一个复合属性
/* [属性名] [持续时间] [速度曲线] [延迟时间];*/
transition:transition-property transition-duration transition-timing-function transition-delay
- 我们可以很方便的用这个过渡来给某一个属性加上好看的动效。例如,宽度属性的值改变时,延迟1 秒后以 ease 曲线进行过渡,持续3秒
transition: width 3s ease 1s;
- 或者一个属性不够,想要监听所有属性。
transition: all 3s ease 1s;
注意:这里的所有属性是指能进行动画过渡的属性,有很多属性是不能进行过渡的,比如display,你不能让一个div的显示模式慢悠悠的发生过渡。
- transition可与js配合使用,js设定要变化的样式,transition负责动画效果
/*css:*/
div{
width:100px;
height:100px;
transition:all 1s;
}
//js
divEle.onclick = function(){
divEle.style.width = "200px";
divEle.style.height = "200px";
}
总结:transform是转换。transition是样式过渡。translate是移动,translate 是transform的属性值。