使用JavaScript触发过渡效果的方法

利用伪类如:hover和:focus，我们能优雅地切换元素的样式，同时享受到过渡带来的流畅效果。除了这些自然的触发方式，我们还可以使用JavaScript来主动控制过渡效果，让设计更加灵活多变。

以狼蚁网站的一个日夜景图片切换为例，我们可以生动展示如何使用JavaScript来驱动过渡。想象一下，日景和夜景两张图片初始时叠加在一起，夜景图的透明度设置为0，隐于日景图之后。当点击“看夜景”按钮时，夜景图的透明度逐渐从0过渡到1，画面就像被轻轻揭开面纱，展现出夜晚的美景。反之，点击“看日景”按钮，我们又可以回到日景图。

这种效果的实现离不开HTML、CSS和JavaScript的协同工作。在HTML中，我们设置两个图片元素和对应的按钮。在CSS中，我们定义了图片的初始状态和过渡效果。而在JavaScript中，我们编写了点击按钮时触发过渡的代码。

具体代码示例如下：

```html

看夜景

看日景