「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」
动画的分类
css动画(本期内容)， js动画（本期不讲）， canvas动画（本期不讲）
Transition动画
transition是一个复合css属性。包括transition-property、transition-duration、transition-timing-function、transition-delay四个子属性
transition-property: 过渡属性(默认值为all) transition-duration: 过渡持续时间(默认值为0s) 唯一必填 transiton-timing-function: 过渡函数(默认值为ease函数) transition-delay: 过渡延迟时间(默认值为0s)
.a {
width: 100px;
height: 100px;
transition: width 2s ease 0s;
}
.b {
width: 300px;
}
<div class="a" :class="{b:start}"></div> 通过控制start来实现动画
注意
-
四个子属性之间不能用逗号隔开，只能用空格隔开。逗号隔开表示多个动画。
-
property:不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果
-
duration:该属性不能为负值,还必须带上单位 如：1s 1ms
-
delay：必须带上单位 如：1s 1ms。如果是负数，ui调整到负数绝对值的动画位置，如果是正数，则不调整。
-
timing-function：分三类：关键字、steps函数和bezier函数
-
关键字：
ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1) linear: 匀速。相当于cubic-bezier(0,0,1,1) ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1) ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1) ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1) step-start: 直接位于结束处。相当于steps(1,start) step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)
-
steps函数
steps(参数一,参数二)
参数一：用来指定间隔个数(该值只能是正整数)
参数二：start或者end，包括第一步和不包括第一步
设置动画结束监听事件
this.$refs.test.addEventListener("transitionend",my);
var my = function (e) {
//当过渡事件执行完后，应及时使用removeEventListener取消绑定，以免对其他效果造成影响
this.$refs.test.removeEventListener("transitionend", myFunction);
};
存在的问题
- transition需要事件触发，所以没法在网页加载时自动发生。
- transition是一次性的，不能重复发生，除非一再触发。
- transition只能定义开始状态和结束状态，不能控制中间状态。
- 不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果
animation动画
- animation-name: 动画名称(默认值为none)
- animation-duration: 持续时间(默认值为0) 不能为负值,还必须带上单位
- animation-timing-function: 时间函数(默认值为ease) 同上
- animation-delay: 延迟时间(默认值为0) 。仅开始时进行一次延迟。如果是负数，ui调整到负数绝对值的动画位置，如果是正数，则不调整。
- animation-iteration-count: 循环次数(默认值为1) 不能是0和负数。
- infinite无限次动画
- animation-direction: 动画方向(默认值为normal) 属性可选择见下文
- animation-play-state: 播放状态(默认值为running) 属性可选择见下文
- animation-fill-mode: 填充模式(默认值为none) 属性可选择见下文
@keyframes animation-name{
from | 0%{}
n%{}
to | 100%{}
}
@keyframes test{
0%{background-color: lightblue;}
30%{background-color: lightgreen;}
60%{background-color: lightgray;}
100%{background-color: black;}
}
.defult {
width: 300px;
height: 100px;
background-color: pink;
animation-name: test;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: none;
}
<div ref="test" class="defult"></div>
注意
- 百分比顺序不一定非要从0%到100%排列，最终浏览器会自动按照0%-100%的顺序进行解析
- 0%不可以省略百分号
- 如果存在负百分数或高于100%的百分数，则该关键帧将被忽略
- 如果0%或100%不指定关键帧，都将使用该元素默认的属性值
- 若存在多个@keyframes，浏览器只识别最后一个@keyframes里面的值
- 如果动画的其他7个子属性和动画名称的长度不同，动画名称列表的长度决定最终的长度，多余的值无用，缺少的值按照顺序进行重复
局限性
animation动画相比Transition动画优化了：
1.可以设置动画次数 2.动画非事件可触发 3.动画可暂停播放 4.动画过程可控制。但是还都是基于style已经定义的属性进行变换。相比较用在canvas中，就显得力不从心。
transform属性
transform分为transform2D和transform3D两种
transform属性提供移动、旋转、缩放和倾斜函数的集合，与之配合的属性有transform-origin变形原点（默认在元素的中心点）。
