黑帽联盟

标题: 使用JavaScript触发过渡效果的方法 [打印本页]
作者: heimao    时间: 2017-2-14 22:46
标题: 使用JavaScript触发过渡效果的方法
使用 :hover 和 :focus 这样的伪类，我们可以很方便的将元素从一个样式切换到另一个样式，而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡（即在代码中触发过渡）也是可以实现的。

和普通过渡一样，先创建两个样式规则，一个是元素的初始状态，一个是过渡结束的状态。然后用 js 在合适的事机修改对应元素的样式即可。

下面以一个日夜景图片切换的样例演示：
11.png

（1）日景和夜景是两张图片叠在一起的。夜景图初始透明度是0，覆盖在日景图上方。
（2）点击“看夜景”按钮，夜景图透明度逐渐从0过渡到1，看起来画面慢慢变成夜景。
（3）点击“看日景”按钮，夜景图透明度逐渐又从1过渡到0，看起来画面恢复成日景。

在线样例如下：
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <title>hangge.com</title>
  5. <style>
  6. img {
  7.   position:absolute;
  8.   transition: opacity 5s;
  9.   -webkit-transition: opacity 5s;
  10. }
  11. .solid {
  12.   opacity: 1;
  13. }
  14. .transparent {
  15.   opacity: 0;
  16. }
  17. </style>
  18. <script>
  19.   function toNight(){
  20.       var nightImage = document.getElementById("nightImage");
  21.       nightImage.className = "solid";
  22.   }
  23.   function toDay(){
  24.       var nightImage = document.getElementById("nightImage");
  25.       nightImage.className = "transparent";
  26.   }
  27. </script>
  28. </head>
  29. <body>
  30.   <button onclick="toNight()">看夜景</button>
  31.   <button onclick="toDay()">看日景</button>
  32.   <div>
  33.     <img src="day.png" alt="日景"/>
  34.     <img src="night.png" alt="夜景" id="nightImage" class="transparent"/>
  35.   </div>
  36. </body>
  37. </html>
复制代码




欢迎光临 黑帽联盟 (https://bbs.cnblackhat.com/) Powered by Discuz! X2.5