版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34983808/article/details/81429898
1、过渡属性
| 值 | 描述 |
|---|---|
| transition-property | 指定过渡动画的属性（并不是所有的属性都可以动画） |
| transition-duration | 指定过渡动画的时间（0也要带单位） |
| transition-timing-function | 指定过渡动画的形式（贝塞尔） |
| transition-delay | 指定过渡动画的延迟 |
测试一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 200px;
height: 200px;
border-radius:50% ;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
/*display: block;*/
/*已知宽高，盒子居中方案*/
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
/*transition-property过渡属性，可以指明多个，其中一个属性发生变化，产生过渡*/
/*transition-duration值的时间单位s，必须写上,不然会失效;*/
transition-property: background,width,height;
transition-duration: 1s,0s,1s;
}
body:hover #test{
width: 100px;
height: 100px;
background:black;
/*支持过渡属性列表：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties*/
/*display: none;*/
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
测试二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
/*display: block;*/
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
/*指定过渡动画的属性（并不是所有的属性都可以动画）*/
transition-property: width;
/*指定过渡动画的时间（0也要带单位）*/
transition-duration: 5s;
/*指定过渡动画的形式（贝塞尔）*/
transition-timing-function: linear;
/*指定过渡动画的延迟*/
transition-delay:3s;
}
body:hover #test{
width: 300px;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
测试三：理解异步概念
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
/*display: block;*/
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width,height;
transition-duration: 2s;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var testNode = document.querySelector("#test");
var bodyNode = document.querySelector("body");
//dom0事件
bodyNode.onmouseover=function(){
testNode.style.width="300px";
testNode.style.height="300px";
setTimeout(function(){
testNode.style.display="none";
},3000)
}
//dom2
testNode.addEventListener("transitionend",function(){
alert("over")
})
}
</script>
</html>
测试四：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
/*移入：高度产生过渡效果;移出：宽度产生过渡效果*/
body:hover #test{
/*过渡属性由width立即变成height，鼠标滑动时解析瞬间完成，此时的动画效果*/
transition-property: height;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
测试五：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
//transition在元素首次渲染还没有结束的情况下是不会被触发的
//解决方案：window.onload或者用定时器可以使得代码解析绘制渲染完成2步完成，transition过渡会触发
/*
* 2个过程：
* 解析：过程极快
* 绘制渲染：过程比较慢
* */
// window.onload=function(){
setTimeout(function(){
var test = document.querySelector("#test");
test.style.width="300px";
},3000)
// }
</script>
</html>
测试六：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
//transition在元素首次渲染还没有结束的情况下是不会被触发的
window.onload=function(){
var test = document.createElement("div");
test.id="test";
document.documentElement.appendChild(test);
setTimeout(function(){
test.style.width="300px";
},2000)
}
</script>
</html>
测试七：过渡的简写属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 200px;
height: 200px;
border-radius:50% ;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
/*display: block;*/
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
/*过渡的简写属性*/
transition: 2s 3s width,3s height;
}
body:hover #test{
width: 100px;
height: 100px;
background:black;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
2、过渡完成事件
测试一：过渡完成之后执行自定义处理
element.addEventListener("transitionend", function() {
// do something
}, true);https://segmentfault.com/a/1190000012698032#articleHeader1
https://segmentfault.com/a/1190000004392988
https://segmentfault.com/a/1190000004460780#articleHeader3
https://juejin.im/post/591340e0128fe100586e431b