用JavaScript触发过渡效果的方法

使用：hover和：focus等伪类，我们可以轻松地将元素从一种样式切换到另一种样式，切换会有过渡效果。但是有时我们希望使用js来驱动转换(也就是说，触发代码中的转换)。

与普通过渡一样，首先创建两个样式规则，一个是元素的初始状态，另一个是过渡的结束状态。然后使用js在适当的机器中修改相应元素的样式。

以下是昼夜场景画面切换的示例演示：

(1)白天场景和夜晚场景是堆叠在一起的两张图片。夜景的初始透明度为0，覆盖了日景的顶部。

(2)点击“看夜景”按钮，夜景图的透明度从0逐渐过渡到1，画面似乎慢慢变成了夜景。

(3)点击“观看夜景”按钮，夜景透明度从1逐渐过渡到0。这幅画似乎被还原成了日落景观。

在线示例如下：

！doctype html html lang=' en ' head title hangge.com/title style img { position : absolute；transition:不透明度5s；-WebKit-transit :不透明度5s；}.固态{ opa city 3360 1；}.透明{ opa city 3360 0；}/style script function THanywhere(){ var night image=document . getelementbyid(' night image ')；night image . class name=' solid '；} function Today(){ var night image=document . getelementbyid(' night image ')；nightImage.className='透明'；}/script/head body buttononclick=' south()'观看夜景/button button onclick='toDay()'观看日间场景/button div Img src=' http 3360 day . png ' alt='日间场景'/Img src=' http : night . png ' alt='夜景' id=' night image ' class=' transparent '/div/body/html以上是边肖推出的JavaScript触发的过渡效果。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！