如何在點擊時淡出圖像

Question

我最近開始編碼，我非常喜歡它。 話雖如此，我對它還是很陌生，而且非常……新手。 我想知道是否有一種方法可以讓我的居中圖標淡出，而不是在點擊時消失。 我創建的疊加層也是如此。

 function functionHide(divId, divId2, ) { let x = document.getElementById(divId); let y = document.getElementById(divId2); x.style.display = "none"; y.style.display = "block"; }

 #icon { content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk'); height: 256px; width: 256px; top: 50%; left: 50%; position: fixed; margin-top: -128px; margin-left: -128px; z-index: 1; transition: .4s ease; display: block; } #overlay { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; display: none; } #icon:hover { cursor: pointer; transform: scale(1.5); transition: transform.4s; }

 <div id="icon" onclick="functionHide('icon', 'overlay')"></div> <div id="background"> <div id="overlay"></div> </div>

Answer 1

如果設置了transition ，請使用@keyframes animation 或更改圖像的不透明度。

@keyframes

 function functionHide(divId, divId2, ) { let x = document.getElementById(divId); let y = document.getElementById(divId2); x.style.animation = "fadeOut 0.2s forwards"; y.style.animation = "fadeOut 0.2s forwards"; }

 #icon { content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk'); height: 256px; width: 256px; top: 50%; left: 50%; position: fixed; margin-top: -128px; margin-left: -128px; z-index: 1; transition: .4s ease; display: block; } #overlay { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; display: none; } #icon:hover { cursor: pointer; transform: scale(1.5); transition: transform.4s; } @keyframes fadeOut{ from{ opacity:1; } to{ opacity:0; } }

 <div id="icon" onclick="functionHide('icon', 'overlay')"></div> <div id="background"> <div id="overlay"></div> </div>

解釋

fadeOut 0.2s forwards
^       ^    ^
name of animation
        duration of animation
             instructs the animation to run once, then stay in the same state after animation

或者你可以考慮使用 jQuery fadeOut() function 像這樣：

 function functionHide(divId, divId2, ) { let x = document.getElementById(divId); let y = document.getElementById(divId2); $(x).fadeOut(); $(y).fadeOut(); }

 #icon { content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk'); height: 256px; width: 256px; top: 50%; left: 50%; position: fixed; margin-top: -128px; margin-left: -128px; z-index: 1; transition: .4s ease; display: block; } #overlay { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; display: none; } #icon:hover { cursor: pointer; transform: scale(1.5); transition: transform.4s; } @keyframes fadeOut{ from{ opacity:1; } to{ opacity:0; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="icon" onclick="functionHide('icon', 'overlay')"></div> <div id="background"> <div id="overlay"></div> </div>

Answer 2

例子中有一個很好的淡入淡出。

在隱藏 class 中使用 animation，例如：

.hide {
    animation-name: fadeOut;
    animation-duration: 3s;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

請記住使用-webkit或-moz等瀏覽器擴展。