查看: 730|回复: 0

[其它] 使用JavaScript触发过渡效果的方法

[复制链接]

148

主题

9

听众

337

积分

版主

Rank: 7Rank: 7Rank: 7

  • TA的每日心情
    擦汗
    2018-6-6 11:33
  • 签到天数: 348 天

    [LV.8]以坛为家I

    |显示全部楼层
    使用 :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>
    复制代码
    您需要登录后才可以回帖 登录 | 会员注册

    站长推荐上一条 /1 下一条