本文详细介绍了CSS3的过渡效果，包括transition-property、transition-duration、transition-timing-function和transition-delay的用法。讨论了如何检测过渡属性，并提醒开发者在使用过程中可能遇到的坑，如过渡属性的即时切换问题、首次渲染时的过渡不触发以及变换样式位置不同时的过渡失效。文章还提供了代码示例以帮助理解这些概念。
css3过渡
transion是指从一种样式逐渐改变为另一种样式的效果
必须规定两项内容：
1.希望把效果添加到哪一个css属性上(默认是all)
2.效果的时长
效果开始于指定的 CSS 属性改变值时。
CSS 属性改变的典型时间是鼠标指针位于元素上时
-
transition-property(过渡属性的名称)
默认值为all.表示所有可被动画的属性都表现出过渡动画，可指定多个 -
transition-duration(过渡效果耗费时间)
必须要加单位s或ms
可以指定多个时长，会被应用到transition-property属性上，如果指定的时长个数小于属性个数，那时长列表会重复，如果时长列表过长多余的会被剪掉 -
transition-timing-function(过渡时间函数)：默认值ease（先加速再减速）
linear(恒速)
ease-in(加速)
ease-out(减速)
ease-in-out(先加速再减速)
cubic-bezier(贝塞尔曲线):cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
step-start等同于steps(1,start)
steps(n，start/end) :第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
start 第一帧是第一步动画结束。
end 第一帧是第一步动画开始。
4. transition-delay (从何时开始)
简写属性：
transition:width 3s ease-in ,height 2s 3s;
检测过渡属性：
当过渡完成时触发一个事件 transitionend(每一个过渡属性在过渡完成时都会触发一次transitionend)。在webkit下是webkitTransitionEnd
在事件完成前设置display:none,transition事件不会触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
testNode.addEventListener("transitionend",function(){
alert("over")
})
-->
<style type="text/css">
#test{
width: 100px;
height: 200px;
background-color: pink;
transition-property: width ,height;
transition-duration: 3s;
transition-timing-function: ease;
transition-delay: 0.5s;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
window.onload=function(){//页面渲染完执行这个代码
var testNode = document.querySelector("#test")
//dom0事件
testNode.onmouseover=function(){ //鼠标放上来的时候进行解析执行下面几行代码是触发transition一次
/*浏览器会重新渲染页面，*/
testNode.style.width = "300px"
testNode.style.height = "300px"
setTimeout(function(){
testNode.style.display ="none"
},3000)//在事件完成前设置display：none,transition事件不会触发
}
//dom2
testNode.addEventListener("transitionend",function(){
alert("over")
})
}
</script>
</html>
过渡的坑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#test{
height: 100px;
width: 200px;
background-color: pink;
transition-property: width;
transition-duration: 5s;
}
#test:hover{
width: 400px;
height: 500px;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
上面代码鼠标悬浮和离开都是，width产生过渡，height直接改变
下面代码鼠标悬浮height产生过渡，width直接改变
鼠标离开height直接改变，width产生过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#test{
height: 100px;
width: 200px;
background-color: pink;
transition-property: width;
transition-duration: 5s;
}
#test:hover{
transition-property: height;
width: 400px;
height: 500px;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
- css解析极快，在hover时，内存结构中的transition-property马上被改成了height.在移出时，又马上变回了原本内存中的width
过渡的坑2
transition在元素首次渲染还没有结束时不会触发
1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
transition在元素首次渲染还没有结束时不会触发
-->
<style type="text/css">
#test{
height: 100px;
width: 200px;
background-color: pink;
transition-property: width;
transition-duration: 5s;
}
</style>
</head>
<body>
<div id="test">
</div>
<script type="text/javascript">
var test=document.querySelector("#test")
test.style.width = "300px" //发生在了元素首次渲染前
</script>
</body>
</html>
上面代码不会产生过渡
下面会产生过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#test{
height: 100px;
width: 200px;
background-color: pink;
transition-property: width;
transition-duration: 5s;
}
</style>
</head>
<body>
<div id="test">
</div>
<script type="text/javascript">
window.onload=function(){
var test=document.querySelector("#test")
test.style.width = "300px"
}
</script>
</body>
</html>
2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
transition在元素首次渲染还没有结束时不会触发
-->
<style type="text/css">
#test{
height: 100px;
width: 200px;
background-color: pink;
transition-property: width;
transition-duration: 5s;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var test = document.createElement("div")
test.id="test"
document.documentElement.appendChild(test)
test.style.width = "300px"
}
</script>
</body>
</html>
上面代码不会产生过渡
下面代码会产生过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
transition在元素首次渲染还没有结束时不会触发
-->
<style type="text/css">
#test{
height: 100px;
width: 200px;
background-color: pink;
transition-property: width;
transition-duration: 5s;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var test = document.createElement("div")
test.id="test"
document.documentElement.appendChild(test)
setTimeout(function(){
test.style.width = "300px"
},1000)
}
</script>
</body>
</html>
过渡的坑3：
在绝大部分变换样式切换时，如果变换函数的位置个数不相同也不会触发过渡。
（关于执行机制：https://blog.youkuaiyun.com/qq_40052011/article/details/103087573）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
