好用的css3特性-过渡和2D变换
css3中有很多非常好用的特性,今天来总结一下与动画相关,包括过渡、2D变换。
首先来介绍一下过渡,过渡是在进行变化的时候进行的一个缓冲,如果没有过渡,当变更了元素的位置、大小的数据时,会一瞬间完成变化,增加了过渡之后,变化的过程会展现出来。比如以下gif,我们想要在鼠标移入盒子的时候,将盒子的宽和高增大一倍,并且更改颜色,没有过渡和过渡明显在用户体验上就不一样。
过渡的写法也简单,只需要在变化的基础上增加一个 transition 就行
transition: 过渡属性 过渡时间 过渡曲线 延迟时间
(1) 过渡属性,可以设置 宽度、高度、transform等,当有多个过渡效果时,可以用逗号隔开,或者用all来代表所有效果 (必写)
(2) 过渡时间,单位是s,表示花多久的时间达到变化后的效果 (必写)
(3) 过渡曲线,默认 ease,即逐渐慢,还有以下选项可以选择
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
(4) 延迟时间,表示推迟多久执行过渡效果,默认0s,即不延迟,可以自定义
过渡曲线不是很好理解,这里演示一下 ease、ease-in、ease-out、ease-in-out的区别
了解完过渡的语法之后,如上图的过渡效果,就可以这样来定义,创建一个空的div标签,然后为它定义宽高背景色
.box { width: 100px; height: 100px; background-color: pink; // 此处用来定义过渡, 默认的内容可以省略, 实际为 transition: all 1s ease 0s transition: all 1s; } .box:hover { width: 200px; height: 200px; background-color: skyblue }
除了改变宽高,如果我们需要移动元素的位置,这时候该怎么做呢?有两种方式帮我们实现这一效果,以下示例1s后向分别在x和y轴移动100px方式一, 直接修改top/left的值
// css代码 .box { position: relative; top: 0; left: 0; background-color: pink; height: 100px; width: 100px; transition: all 1s; // 增加过渡, 使变化不那么突兀 } // html代码 <div class="box"></div> // js代码 const box = document.getElementsByClassName('box')[0] setTimeout(()=>{ box.style.left = "100px" box.style.top = "100px" },1000)
上述需求的实现方法
// css代码 .box { transform: translate(0,0); background-color: pink; height: 100px; width: 100px; transition: all 1s; // 增加过渡, 使变化不那么突兀 } // html代码 <div class="box"></div> // js代码 const box = document.getElementsByClassName('box')[0] setTimeout(()=>{ box.style.transform = "translate(100px, 100px)" },1000)
按照以前通过绝对定位/相对定位的方式移动元素会造成浏览器的重绘和重排,而css3新增的transform只会重绘而不会重排,我们可以通过谷歌浏览器中的 preformance 来观察到这一差别。
浏览器进行布局和绘制都是需要一定的时间,大量的重绘重排会影响程序的性能,所以如果在没有兼容性要求的情况下,我们都可以通过translate来改变元素的位置。
那么translate可以应用到什么样的场景下呢,可以试想一下,在一些PC端电商项目中,鼠标移入某个商品,该商品就可能出现向上/下移动的动画,表示你的鼠标正移入到此处,如果鼠标移开,那么商品就恢复原来的位置。图示效果如下。
实现的代码结合transform进行移动和transition实现过渡效果即可。
img { margin: 100px; width: 200px; transition: transform .6s } img:hover { transform: translate(0, 50px); }
实现代码如下
// css ul { display: flex; } li { list-style-type: none; width: 30px; height: 30px; line-height: 30px; border: 1px solid #000; border-radius: 50%; text-align: center; margin: 10px; cursor: pointer; transition: transform .1s; } li:hover { transform: scale(1.3) } // html <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul>
transform: rotate(deg) // deg表示旋转度数
使用rotate可以模拟各个方向的箭头,当展开或者收起时,箭头的方向进行变化
实现代码如下
div { position: relative; border: 1px solid #000; width: 260px; height: 30px; margin: 100px auto; } div::after{ position: absolute; top: 6px; right: 10px; display: block; content: ""; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 1s; } div:hover::after{ transform: rotate(225deg) translate(-6px, -4px); // transform属性可以累加使用 }