使用 JavaScript 更改元素的顯示時添加平滑過渡

Question

我在標題中添加了一個搜索欄，該搜索欄設置為display: none默認情況下，我使用 js 通過分配一個包含display: block !important的.show類使其出現在按鈕單擊上搜索欄元素（ #search ）。它工作正常，但我唯一的問題是從display: none到block的粗略過渡，所以我一直在尋找使這種過渡平滑的方法，我發現的大多數答案都使用了 jQuery，我真的不想因為我還處於 js 的學習階段，所以如果有一種方法可以使用 vanilla js 來做到這一點，請幫助我。

這是我的代碼https://jsfiddle.net/5jxLq9ck/

在 CSS 第 38 行中，我添加了.show實用程序類

.show {
    display: block !important;
}

我假設我必須在這里編輯一些東西 (js) 以獲得所需的效果：

function showSearch(e) {
    e.preventDefault;
    if (
        e.target.classList.contains("show-btn") ||
        e.target.classList.contains("fas")
    ) {
        const searchBar = document.querySelector("#search");
        searchBar.classList.add("show");
    }
}

附加問題：我在這里使用e.preventDefault是否正確？ 在我使用它之前，該功能不起作用。

非常感謝。

Answer 1

這是一個更新的片段，我更改了動畫的輸入width 。 您可以通過設置輸入height使其更加平滑。

 const searchDiv = document.querySelector("#search-div"); // ADD EVENT LISTENERS searchDiv.addEventListener("click", showSearch); // FUNCTION: SHOW SEARCH BAR ON BUTTON CLICK function showSearch(e) { e.preventDefault; if ( e.target.classList.contains("show-btn") || e.target.classList.contains("fas") ) { const searchBar = document.querySelector("#search"); searchBar.classList.add("show"); } }

 /* GENERAL */ :root { --light-color: #ccc; --lighter-color: #f4f4f4; --dark-color: #333; --darker-color: #222; --brand-color: #ff4; --danger: #f44; --danger-dark: #c00; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--dark-color); color: var(--light-color); font-family: "Trebuchet MS"; } ul li { list-style: none; } button, input { outline: none; } /* UTILITY */ .highlight { color: var(--brand-color); } .show { width: 300px !important; border: black 2px solid; padding: 0.6rem 1rem; } /* HEADER */ header { background: var(--darker-color); display: flex; flex-direction: row; align-items: center; text-align: center; justify-content: space-between; padding: 1.4rem 6rem; width: 100%; } #logo { font-size: 2.4rem; font-weight: 200; } #search-div { width: auto; height: auto; display: flex; gap: 0.4rem; } .show-btn { padding: 0.6rem 0.7rem; background: var(--light-color); border-radius: 5px; border: none; transition: ease-in 300ms; font-size: 1.2rem; cursor: pointer; height: 100%; margin-top: 2px; } .show-btn:hover { background: var(--brand-color); transition: ease-in 300ms; } #search { width: 0; background: var(--lighter-color); color: var(--darker-color); height: 100%; font-size: 1.2rem; border-radius: 2px; transition: ease-in 300ms; border: none; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Contact List</title> <link rel="stylesheet" href="css/style.css"> <script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script> </head> <body> <header> <div id="logo-div"> <h1 id="logo"> <span class="highlight"><i class="fas fa-user-friends"></i></span> My<span class="highlight">Contact</span>List </h1> </div> <div id="search-div"> <button class="show-btn"><i class="fas fa-search"></i></button> <input id="search" type="text" placeholder="Search contacts..."> </div> </header> <script src="js/main.js"></script> </body> </html>

Answer 2

您可以通過使用opacity屬性使opacity顯示過渡到塊顯示平滑，這樣當元素被賦予“顯示”類時，它就會像這樣從不opacity 0 到opacity 1 進行動畫處理。

 function showSearch(e) { e.preventDefault; if ( e.target.classList.contains("show-btn") || e.target.classList.contains("fas") ) { const searchBar = document.querySelector("#search"); searchBar.classList.add("show"); } } document.getElementById("show").addEventListener("click", e => { showSearch(e); });

 @keyframes smooth { from { opacity: 0; } to { opacity: 1; } } .show { animation: smooth 1s ease; display: block !important; } .none { display: none; }

 <div class="none" id="search">Example</div> <button class="show-btn fas" id="show">Show</button>

使用 JavaScript 更改元素的顯示時添加平滑過渡

問題描述

2 個解決方案

解決方案1
1 已采納 2020-08-25 19:10:47

解決方案2
0 2020-08-25 19:04:55

使用 JavaScript 更改元素的顯示時添加平滑過渡

問題描述

2 個解決方案

解決方案1 1 已采納 2020-08-25 19:10:47

解決方案2 0 2020-08-25 19:04:55

解決方案1
1 已采納 2020-08-25 19:10:47

解決方案2
0 2020-08-25 19:04:55