transition用于实现页面元素状态变化时的平滑过渡效果。1.使用transition需指定属性、持续时间、速度曲线和延迟，语法为transition: property duration timing-function delay；2.可简写或拆分属性以对不同css属性设置不同过渡效果；3.transition与animation的区别在于前者用于状态间简单过渡，后者通过关键帧实现复杂动画；4.transitionend事件可用于监听过渡完成；5.实现复杂动画可通过组合transform等属性；6.若transition无效，需检查属性是否支持、值是否有变化及优先级问题；7.优化性能可用transform和opacity、减少过渡元素、合理使用will-change；8.通过调整timing-function或自定义cubic-bezier曲线可使动画更自然。
页面过渡动画，简单来说，就是让页面元素在状态改变时，不是“咔”一下变过去，而是有个平滑的过渡效果。transition就是干这个的。
transition属性允许你定义CSS属性值之间平滑过渡的效果。它允许你指定要过渡的CSS属性、过渡的持续时间、过渡的速度曲线以及过渡开始之前的延迟。
怎么用transition？
transition的基本语法是：
立即学习“前端免费学习笔记（深入）”；
transition: property duration timing-function delay;
-
property: 你想要过渡的CSS属性，比如
background-color、opacity、transform等。 如果你想让所有属性都过渡，可以用all。 -
duration: 过渡持续的时间，单位是秒(s)或毫秒(ms)，比如
0.3s或300ms。 -
timing-function: 过渡的速度曲线，决定过渡效果的变化速度。常见的有
ease、linear、ease-in、ease-out、ease-in-out。 也可以自定义cubic-bezier曲线。 -
delay: 过渡开始前的延迟时间，单位是秒(s)或毫秒(ms)，比如
0.1s或100ms。
举个例子，让一个div的背景颜色在鼠标悬停时平滑过渡：
<div class="my-div">Hover me</div>
.my-div {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.3s ease; /* 简写形式 */
}
.my-div:hover {
background-color: blue;
}这段代码的意思是，当鼠标悬停在.my-div上时，背景颜色从红色过渡到蓝色，过渡时间是0.3秒，速度曲线是ease。
transition属性拆开写有什么好处？
虽然可以用简写形式，但把transition属性拆开写有时候更方便，尤其是在你需要对不同的属性应用不同的过渡效果时。
比如：
.my-div {
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
transition-property: background-color, opacity;
transition-duration: 0.3s, 0.5s;
transition-timing-function: ease, linear;
transition-delay: 0s, 0.1s;
}
.my-div:hover {
background-color: blue;
opacity: 1;
}这样，背景颜色和透明度的过渡效果就可以分别设置了。 注意，如果你拆开写，那么每个属性的值都要对应，比如transition-property里有两个属性，那么transition-duration里也要有两个时间值。
transition和animation有什么区别？
transition和animation都是CSS动画，但它们的应用场景不太一样。transition通常用于简单的状态过渡，比如hover、focus等。animation则更强大，可以创建复杂的、可重复的动画效果。
简单来说，transition是“状态A到状态B”的过渡，而animation是“关键帧动画”，可以定义多个关键帧，实现更复杂的动画效果。
transitionend事件是什么？
transitionend事件会在CSS过渡完成后触发。 你可以用JavaScript监听这个事件，做一些额外的处理。
const myDiv = document.querySelector('.my-div');
myDiv.addEventListener('transitionend', (event) => {
console.log('Transition ended!', event.propertyName);
});event.propertyName可以告诉你哪个CSS属性完成了过渡。这在处理多个属性的过渡时很有用。
如何用transition实现更复杂的动画效果？
虽然transition主要用于简单的状态过渡，但通过巧妙地组合CSS属性，也可以实现一些复杂的动画效果。 比如，你可以结合transform属性，实现元素的平移、旋转、缩放等动画效果。
.my-div {
width: 100px;
height: 100px;
background-color: red;
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
.my-div:hover {
transform: translateX(100px);
}这段代码会让div在鼠标悬停时向右平移100像素。
为什么我的transition没生效？
transition没生效可能有几个原因：
-
没有指定transition属性: 确保你已经给元素添加了
transition属性。 - 属性值没有变化: transition只在属性值发生变化时才会生效。 如果属性值没有变化，就不会有过渡效果。
-
属性不支持过渡: 有些CSS属性是不支持过渡的，比如
display。 - 优先级问题: 确保你的transition规则没有被其他规则覆盖。
可以尝试在开发者工具里检查元素的CSS样式，看看transition属性是否生效，以及属性值是否正确。
如何优化transition性能？
过渡动画可能会影响页面性能，尤其是在移动设备上。 为了优化性能，可以考虑以下几点：
-
使用硬件加速属性: 尽量使用
transform和opacity属性，这些属性可以利用GPU加速，提高性能。 -
避免过渡layout属性: 过渡
width、height等layout属性可能会导致页面重排，影响性能。 - 减少过渡元素的数量: 过多的过渡元素会增加浏览器的负担。
-
使用will-change属性:
will-change属性可以提前告诉浏览器哪些属性将会被修改，让浏览器提前做好优化。
.my-div {
will-change: transform, opacity;
}但要注意，不要滥用will-change属性，否则可能会适得其反。
如何让transition更自然？
transition的速度曲线（timing-function）对动画效果的自然程度影响很大。 ease、linear、ease-in、ease-out、ease-in-out等预定义的曲线可以满足大部分需求，但如果你想让动画更自然，可以尝试自定义cubic-bezier曲线。
cubic-bezier曲线用四个点定义一个贝塞尔曲线，可以精确控制动画的速度变化。 你可以在网上找到很多cubic-bezier曲线生成器，或者自己手动调整。
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
这个例子使用了一个自定义的cubic-bezier曲线，创建了一个稍微有些弹性的动画效果。
总而言之，transition是一个非常实用的CSS属性，可以让你轻松地创建平滑的页面过渡效果。 掌握了它的基本用法和一些高级技巧，你就可以让你的网站更加生动有趣。
