版权声明:本文为博主原创文章,未经博主允许不得转载。 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