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

更新时间：2017年01月19日 09:37:45 作者：HDWK

hover 和 :focus 这样的伪类，我们可以很方便的将元素从一个样式切换到另一个样式，而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡（即在代码中触发过渡）也是可以实现的，下面通过本文给大家介绍下

使用 :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: opacity 5s;
  -webkit-transition: opacity 5s;
}
.solid {
  opacity: 1;
}
.transparent {
  opacity: 0;
}
</style>
<script>
  function toNight(){
      var nightImage = document.getElementById("nightImage");
      nightImage.className = "solid";
  }
  function toDay(){
      var nightImage = document.getElementById("nightImage");
      nightImage.className = "transparent";
  }
</script>
</head>
<body>
  <button onclick="toNight()">看夜景</button>
  <button onclick="toDay()">看日景</button>
  <div>
    <img src="day.png" alt="日景"/>
    <img src="night.png" alt="夜景" id="nightImage" class="transparent"/>
  </div>
</body>
</html>

以上所述是小编给大家介绍的使用JavaScript触发过渡效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

JS实现图片手风琴效果
这篇文章主要为大家详细介绍了JavaScript实现图片手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
canvas实现钟表效果
本文主要分享了canvas实现钟表效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
JavaScript switch语句使用方法简介
这篇文章主要介绍了JavaScript switch语句使用方法简介,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
特殊情况下如何获取span里面的值
有时因某种特殊需要，会获取span里面的值，下面有个不错的示例，大家可以参考下
2014-05-05
浅谈Web Storage API的使用
Web Storage为浏览器提供了方便的key value存储，是一种比cookie更加方便简洁的存储方式。也是诸多客户端存储方式中非常常见的一种
2021-06-06
关于js中e.preventDefault()的具体使用
本文主要介绍了关于js中e.preventDefault()的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
js时间戳与日期格式之间转换详解
这篇文章主要为大家详细介绍了js时间戳与日期格式之间转换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-12-12
纯JS 绘制数学函数
今天闲来无事用js写了个数学绘图包，还不算完整，不过总出现了雏形。
2009-04-04
JavaScript的String字符串对象常用操作总结
String对象用于存储字符串数据,这里我们做了JavaScript的String字符串对象常用操作总结,需要的朋友可以参考下
2016-05-05
JS浏览器导航栏navigator的一些冷知识
这篇文章主要为大家介绍了JS导航栏navigator的一些冷知识使用方法实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12