css的过渡-变换

css3 过渡与变换

• transition 过渡属性，复合属性。
• transform 变换属性，

过渡

过渡就是一个状态到另一个状态之间发生的变化。

可以过渡的属性

在属性变化过程中有中间值的属性就可以过渡，例如: width:100px到 width:150px 其中间值便是: 101px~149px

css 可动画属性的列表

样式继承

在元素状态发生变化时，其原有样式会继承到状态改变后的元素上。

#box {
  background-color: aqua;
  width: 100px;
  height: 100px;
  transition: 2s;
}
#box:hover {
  background-color: #ccc;
  border-radius: 10px;
}

如上，#box 元素的 width height transition 会继承到 #box:hover 里。

那么在从 #box 过渡到 #box:hover 都将耗时两秒。

等同于：

#box:hover {
  background-color: #ccc;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  transition: 2s;
}

假如，你想单独定义 #box:hover 中的过渡效果：

#box:hover {
  background-color: #ccc;
  border-radius: 10px;
  transition: 200ms;
}

其实就是覆盖掉继承的样式罢了，根修改width 为 150px没有区别。

如果在#box中没有定义过渡样式，只在#box:hover中定义transition: 200ms;则表示：鼠标移入时过渡为200ms，移出时则为#box中定义的过渡效果。

过渡的各个子项规则

• transition-property 定义需要过渡的属性，默认值为all表示所有样式。
• transition-duration 定义过渡时长。
• transition-timing-function 定义过渡时的贝塞尔曲线，默认值为ease 。
• transition-delay 定义延迟时间，默认值为0。

在 过渡属性 和 过渡时间 不匹配时，多出的样式会从头再匹配对应的时长。时长多于样式时多出的时间设定会被舍弃。延迟和运动轨迹效果同理。

#box {
    transition-property: background, width, height, color;
    transition-duration: 1s, 3s;
    transition-delay: 2s, 1s, 3s;
 transition-timing-function: linear, ease, ease-in, ease-in-out;
}

以上，background和height过渡时长为1s，width color 的过渡时长为3s。background和color延迟时长为2s，width 的过渡时长为1s，height延迟时长为3s。。。

运动轨迹

css 贝塞尔曲线-在线设定

transition-timing-function 定义过渡时的贝塞尔曲线，默认值为ease 。

有预定值：

步进过渡

使用 steps() 函数设定

#box {
 transition-timing-function: steps(3, start);
}

以上，steps(3, start)表示将整个过渡分为三份，从开始分。steps(3, end) 从结尾分。

规则简写：

step-start 和 step-end 这两个值等价于 steps(1, start)和steps(1, end)。

#box {
 transition-timing-function: step-start;
    /* 等价于 */
    transition-timing-function: steps(1, start);
}

过渡的复合规则

transition 过渡属性，复合属性。

• transition: 样式 曲线 时长 延迟;

最常用的方式为：transitio: 2s; 只填一个持续时间。其他的都有默认值嘛因为。

#box {
 transition: 2s;
    /* 等于 */
    transition: all ease 2s 0s;
}

复合属性也是可以分别定义样式的运行规则

#box {
    transition: background ease 2s 0s,
        color 2s,
        border-radius linear 3s 1s;
}

js 监测

在js中提供一个transitionend API 可以在过渡结束时触发。

let box = document.querySelector('#box')

box.addEventListener('transitionend', function (e){
    console.log(e);
})

变换

transform 变换属性，适用于2D或3D转换的元素

基点

• transform-origin 定义元素变换的基点。

  语法：

  transform-origin: x-axis y-axis z-axis;
  

  x-axis 有预定值：

  • left, center, right

  y-axis 有预定值：

  • top, center, bottom

  此外还可以使用 px % 等长度值。

超推荐文章：

理解CSS3 transform中的Matrix(矩阵) « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

CSS3 transform 中的 matrix - 简书 (jianshu.com)

详解如何用 CSS3 完成 3D transform变换 - fx67ll - 博客园 (cnblogs.com)

CSS3 变换 - SegmentFault 思否

2D 变换

二维变换，在平面上的变换，围绕x y 轴变换。

• matrix(n, n, n, n, n, n) 定义 2D 转换，使用六个值的矩阵。可以实现全部的变换的效果。

位移

• translate(x, y) 定义元素位移
• translateX( n ) 定义元素延x轴位移
• translateY( n ) 定义元素延y轴位移
• matrix 实现： matrix(1, 0, 0, 1, x, y) 在使用matrix不可以包含单位

缩放

• scale(x, y) 定义 2D 缩放转换。
• scaleX( x ) 定义元素延x轴缩放转换。
• scaleY( y ) 定义元素延y轴缩放转换。
• matrix 实现： matrix(x, 0, 0, y, 0, 0)

旋转

• rotate( angle )定义 2D 旋转，在参数中规定角度。
• matrix 实现：matrix(cosθ, sinθ, -sinθ, cosθ ,0 ,0)

// 弧度和角度的转换公式：弧度=π/180×角度 
const radian = Math.PI / 180 * 30 // 算出弧度
const sin = Math.sin(radian) // 计算 sinθ
const cos = Math.cos(radian) // 计算 cosθ
console.log(sin, cos) // 输出 ≈ 0.5, 0.866

倾斜

• skew(Xangle, Yangle) 倾斜转换。
• skewX( angle ) 延x轴倾斜转换。
• skewY( angle ) 延y轴倾斜转换。
• matrix 实现：matrix(1,tan(θy),tan(θx),1,0,0)

function tan (deg) {
    const radian = Math.PI / 180 * deg
    return Math.tan(radian)
}
const b = tan(30)
const c = tan(20)
console.log(b, c)

3D 变换

。。。