手把手教学！HTML中transition属性轻松实现页面过渡动画

想让网页元素动起来？告别生硬的切换，用HTML中的`transition`属性轻松实现平滑的页面过渡动画！本文将手把手教你如何使用`transition`，从基本语法`transition: property duration timing-function delay;`到属性拆分、`transitionend`事件监听，再到利用`transform`等属性实现复杂动画，一网打尽。同时，还会为你解答`transition`无效的常见原因，并提供优化性能的技巧，例如使用硬件加速属性、减少过渡元素等。更有自定义`cubic-bezier`曲线，让你的动画更自然生动！快速掌握`transition`，让你的网站更具吸引力！

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的背景颜色在鼠标悬停时平滑过渡：

Hover me

.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属性，可以让你轻松地创建平滑的页面过渡效果。 掌握了它的基本用法和一些高级技巧，你就可以让你的网站更加生动有趣。

今天关于《手把手教学！HTML中transition属性轻松实现页面过渡动画》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！