在图像上单击隐藏图像并显示带过渡的 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上的一个工作示例