display實現淡入淡出過渡效果

時間 2020-01-18

標籤 display 實現淡入淡出過渡效果欄目 CSS 简体版

原文原文鏈接

display實現淡入淡出過渡效果html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            position: relative;
        }
        input {/*按鈕樣式*/
            cursor: pointer;
            border: none;
            outline: none;
            background: #34BC9D;
            color: #fff;
            height: 40px;
        }
        img {
            position: absolute;
            transition: 1s;
            left: 0;
            top: 100%;
            opacity: 0;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <input id="root" type="button" onclick="show()" value="點擊顯示圖片">
        <img id="img" src="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png" alt="">
    </div>
<script>
    var root = document.getElementById("root");
    var img = document.getElementById("img");
    function show(){
        if(root.value === "點擊顯示圖片"){
            root.value = "點擊隱藏圖片";
            /*設置setTimeout，讓display先執行，opacity後執行*/
            img.style.display = "block";
            setTimeout(function () {
                img.style.opacity = 1;
            },.1);
        }else{
            root.value = "點擊顯示圖片";
            img.style.opacity = 0;
            /*隱藏須要先執行opacity，再執行display，不然無效*/
            setTimeout(function () {
                img.style.display = "none";
            },900);
        }
    }
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。