在圖像上單擊隱藏圖像並顯示帶過渡的 div

Question

我正在研究一個搜索欄。 首先，用戶將只能看到搜索圖標。 當用戶單擊搜索圖標時，該搜索圖標將被替換為包含新搜索欄的 div。 我希望當用戶點擊搜索圖標時，新的 div 會以 1 秒的過渡時間出現，新的 div 看起來像是搜索圖標的擴展版本。

<img src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" id="Search-Collapse" style="cursor: pointer;" onclick="toggle_div_fun();">
    <br/><br/>

    <script>
        
        function toggle_div_fun() {
            debugger;
            document.getElementById("Search-Collapse").style.transition = "all 2s";
            debugger;
    var divelement = document.getElementById("Search-Collapse");
    var searchelement =document.getElementById("Search-Expand");
    var menusection =document.getElementById("menu-section");
    var searchsection =document.getElementById("search-section");
    if(divelement.style.display == 'none'){
        divelement.style.display = 'block';
        searchelement.style.display = 'none';
        menusection.style.width = '65%';
        searchsection.style.width = '15%';
        searchsection.style.marginTop = '30px';
    }
    else{
        divelement.style.display = 'none';
        searchelement.style.display = 'block';
        menusection.style.width = '65%';
        searchsection.style.width = '15%';
        searchsection.style.marginTop = '50px';
    }
    }
    </script>

Answer 1

顯示不適用於過渡，您可以使用divelement.style.opacity = 0; 有效地隱藏你的 div 並且不要忘記為啟動設置不透明度 set divelement.style.opacity = 1;

是這樣的：

 <img src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" id="Search-Collapse" style="cursor: pointer;" onclick="toggle_div_fun();"> <br/><br/> <script> document.onload = () => { document.getElementById("Search-Expand").style.transition = "all 2s"; document.getElementById("Search-Collapse").style.transition = "all 2s"; document.getElementById("Search-Collapse").style.opacity = 1; document.getElementById("Search-Expand").style.opacity = 1; } function toggle_div_fun() { var divelement = document.getElementById("Search-Collapse"); var searchelement =document.getElementById("Search-Expand"); var menusection =document.getElementById("menu-section"); var searchsection =document.getElementById("search-section"); if(divelement.style.display == 'none'){ divelement.style.display = 'block'; searchelement.style.display = 'none'; menusection.style.width = '65%'; searchsection.style.width = '15%'; searchsection.style.marginTop = '30px'; } else{ divelement.style.display = 'none'; searchelement.style.display = 'block'; menusection.style.width = '65%'; searchsection.style.width = '15%'; searchsection.style.marginTop = '50px'; } } </script>

Answer 2

您可以在 JavaScript 簡單事件偵聽器中使用 CSS 不透明度來做到這一點； 如果您不明白任何事情，請查看下面的詳細代碼，讓我知道，我會盡力向您解釋：D

HTML：

<img src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" id="Search-Collapse" style="cursor: pointer;">
<br>
<input type="text" id="Search-Input" placeholder="search query" />

CSS：

body {
  background: red;
}

img {
  width: 50px;
}

記者：

var searchIcon = document.querySelector('img');
var inputSearch = document.getElementById('Search-Input');
inputSearch.style.opacity = 0;
inputSearch.style.transition = "opacity 1s"

searchIcon.addEventListener('click', function(){

  if(inputSearch.style.opacity == 0 || inputSearch.style.opacity == ''){
    inputSearch.style.opacity = 1;

  }
  else {
  
   inputSearch.style.opacity = 0;

  }

});

這是JSFIDDLE上的一個工作示例