【SSD系列】雪花飘，购物抛物线，进度条等四个案列，带入走进 CSS transition

前言

关于关于【SSD系列】：

前端一些有意思的内容，旨在3-10分钟里， 500-1500字，有所获，又不为所累。

今天从四个案例，我们一起走进 CSS Transition。

源码 以及 在线演示地址

源码地址： 四个案例， CSS Transition 源码

在线演示地址：(兼容移动端)

• 贝塞尔曲线运动
• 进度条
• 雪花飘飘效果
• 购物车抛物线效果

案例演示

内置贝塞尔函数运动效果

效果有：

• ease
• linear
• easy-in
• easy-out
• easy-in-out

贝塞尔曲线运动-演示地址

进度条

思路

• 两个div, 一个outer, 一个inner
• box-shadow
• transition

进度条-演示地址

雪花飘飘

思路：

• n个postion为absolute的HTML节点
• transition 随机贝塞尔曲线和动画时间

雪花飘飘效果

购物车抛物线

思路： top和left的属性一个用linear，一个easy-in 贝塞尔时间函数

购物车抛物线效果

Transition属性：

那我们就先说说transition的属性

额外提一下两个属性：

• transition-property

all: 所有属性， none: 也就是不生效。

当然也不是所有的属性都可以来动效， 具体的参考Certain CSS properties can be animated

不支持的动画属性：background-image, float, display, position,visibility。

深入理解CSS过渡transition有一个简单分类的总结，当然相对全面还是Certain CSS properties can be animated

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
复制代码

• transition-timing-function
  三阶贝塞尔曲线函数， 这里只要两个控制点的值。
  至于什么是贝塞尔曲线，可以看看贝塞尔曲线扫盲。
  

内置了几个简单的：

1、ease：逐渐变慢, 贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
2、linear：匀速，linear 贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
3、ease-in：加速，ease-in 贝塞尔曲线(0.42, 0, 1.0, 1.0)
4、ease-out：减速，ease-out贝塞尔曲线(0, 0, 0.58, 1.0)
5、ease-in-out：加速然后减，ease-in-out 贝塞尔曲线(0.42, 0, 0.58, 1.0)
更多的可以在这里获得在线贝塞尔。
这里的取值还有一种steps函数，可以参考深入理解CSS过渡transition

多值：多种属性同时变化的时候

依旧是两个总写法。 注意transition-property和其他属性数量不一致的情况。

/* 方法一*/
.demo{
    transition-property: width, height;
    transition-delay: 500ms;
    transition-timing-function: linear;
    transition-duration: 2000ms;
}
/* 方法二*/
.demo{
  transition: width 2000ms linear 500ms, height 2000ms linear 500ms
}
复制代码

触发方式

• 伪类触发

:hover、:focus、:active等

• 媒体查询触发

@media

• javascript触发

Transition事件

• transitioncancel
  转换取消事件 ， 该事件和transitionend互斥，只会有一个发生。
• transitionend
  转换结束事件
• transitionrun
  转换进行事件
• transitionstart
  转换开始事件，因为转换有delay属性，所以进行，不一定真正的开始。

const transition = document.querySelector('.transition');
transition.addEventListener('transitioncancel', () => {
  console.log('Transition canceled');
});
复制代码

Transition事件的触发次数是非复合的过渡属性的个数, 比如width, height同时变换，那么就是两次。

还比较有趣的事， 比如hover到某元素的时候，开始变换，没变换结束，你就离开。 变换效果会倒着来。上面的demo，就会看到。

基本了解了属性和事件，基本就是进一步的应用了， 可以自行下载源码看看， 思想有多风骚，作用就有多大。

写在最后

不忘初衷，【SSD系列】，3-5分钟，500-1000字，有所得，而不为所累，如果你觉得不错，你的一赞一评就是我前行的最大动力。

技术交流群请到 这里来。 或者添加我的微信 dirge-cloud，一起学习。