css3中的过渡
1、transition的几个样式值
transition-property：设置要过渡的属性值例如（height，width）
transition-duration：设置过渡时间（必须加上时间单位）
transition-timing-function：设置过渡样式
ease -- 先加速后减速
linear -- 匀速变化
ease-in -- 加速变化
ease-out -- 减速变化
ease-in-out -- 先加速后减速
cubic-bezier() -- 按照该函数曲线变化
transition-delay：设置过渡的延迟时间
2、过渡动画的样式覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡的样式覆盖</title>
<style>
.outer {
width: 400px;
height: 400px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 1px solid;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: pink;
text-align: center;
font: 20px/100px "微软雅黑";
transition-property: width;
transition-duration: 5s;
transition-timing-function: ease;
}
.outer:hover .inner {
transition-property: height;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">文字内容</div>
</div>
</body>
</html>
就像上述代码一样，如果在其他地方hover或者是怎么样，那么它的样式会根据最新的发生改变
3、过渡动画的绑定时机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡的天坑</title>
<style>
.outer {
width: 400px;
height: 400px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 1px solid;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: pink;
text-align: center;
font: 20px/100px "微软雅黑";
transition-property: width,height;
transition-duration: 5s;
transition-timing-function: ease;
transition-delay: 2s;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">文字内容</div>
</div>
</body>
<script>
// transition只能是首次页面渲染完成后才能被触发
window.onload = function () {
var inner = document.getElementsByClassName("inner")[0]
var outer = document.getElementsByClassName("outer")[0]
inner.style.width = "200px"
}
</script>
</html>
transition只能是首次页面渲染完成后才能被触发