前端课程——过渡
过渡
什么是过渡
此属性同样存在浏览器兼容问题：
/* WebKit引擎的浏览器（Chrome、Safari、Opera） */
-webkit-transition : <single-transition>;
/* Gecko引擎的浏览器（Firefox） */
-moz-transition : <single-transition>;
/* Trident引擎的浏览器（IE 10+） */
-ms-transition : <single-transition>;
/* Presto引擎的浏览器（Opera） */
-o-transition : <single-transition>;过渡子属性
-
ltransition-property属性：用于定义过渡效果中的样式属性名称。 -
ltransition-duration属性：用于定义过渡效果执行动画的时长。 -
ltransition-timing-function属性：用于定义过渡效果计算的函数。-
ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢。 -
linear：元素样式从初始状态过渡到终止状态时速度是匀速。 -
ease-in：元素样式从初始状态过渡到终止状态时速度由慢到快。 -
ease-out：元素样式从初始状态过渡到终止状态时速度由快到慢。 -
ease-in-out：元素样式从初始状态过渡到终止状态时，先加速再减速。 -
step：将整个过渡过程划分成相同大小的间隔，每个间隔是相等的。
-
-
ltransition-delay属性：用于定义过渡效果开始的延迟时间。
触发过渡的方式
成功设置过渡的条件
- 具有一个CSS属性在过渡效果中的开始样式和最终样式
- 通过transition-property指定过渡效果要执行的样式属性名称
- 通过transition-duration 设置过渡效果执行的时长
- 伪类触发过渡
- 使用子属性
各属性之间（多个属性时）用逗号分隔例如
transition-property: background-color,width;每个属性与时间一一对应，如果指定的时长的个数小于属性的个数，则时长列表会被重复，以与属性的个数匹配；如果指定的时长的个数大于属性的个数，则时长列表会被裁减。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; border: 1px solid gray; /* 设置执行过渡效果开始的样式 */ background-color: lightcoral; /* 用来执行过渡效果的样式属性 */ transition-property: background-color,width; /* */ transition-duration: 1s,2s; } /* 触发过渡效果的方式 */ .box:hover{ /* 设置执行过度效果最终的样式 */ background-color: lightyellow; width: 300px; } </style> </head> <body> <div class="box"></div> </body> </html> - 使用合属性
用逗号分隔每个过渡。例如
transition: width 2s linear,height 2s linear;表示2秒匀速过渡. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background: lightcoral; transition: width 2s,height 2s; } .box:hover{ width: 400px; height: 400px; } </style> </head> <body> <div class="box"></div> </body> </html>
- 使用子属性
各属性之间（多个属性时）用逗号分隔例如
- JavaScript触发过渡 推荐使用css
检测过渡是否完成
须使用JavaScript使用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transitionEnd事件</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid gray;
background: lightcoral;
transition-property: background;
transition-duration: 2s;
}
.box:hover {
background: lightyellow;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
var box = document.getElementById('box');
box.addEventListener('transitionend', function () {
console.log('这个过渡执行完毕了......')
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-03-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录