Making a search bar appear slowly after clicking search icon

Question

So I have a searching glass icon that when clicked makes the search box appear.

Here is the code. The first line is the icon. The second line is the search box. The third line is an 'x' icon to exit the search box.

 document.getElementById('searchIcon').onclick = function() { document.getElementById('search').style.display = 'block'; document.getElementById('clear').style.display = 'block'; document.getElementById('search').focus(); document.getElementById('searchIcon').style.display = 'none'; } document.getElementById('clear').onclick = function() { document.getElementById('searchIcon').style.display = 'block'; document.getElementById('search').style.display = 'none'; document.getElementById('clear').style.display = 'none'; } 

 #searchIcon { font-size: 5em; } #search { color: rgb(255, 255, 255); background-color: rgb(101, 64, 160); border: solid 3px rgb(247, 157, 210); border-radius: 10px; width: 75%; margin-top: 20.8px; margin-left: 12.5%; font-size: 2.2em; display: none; outline: none; cursor: text; } #clear { text-align: right; width: 5%; margin-top: -1.5em; margin-left: 82%; display: none; } #clear:hover { cursor: pointer; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <i id="searchIcon" class="material-icons accent">search</i> <input type="text" id="search"> <i id="clear" class="material-icons">clear</i> 

So as you can see the javascript is making the search icon disappear and the search box appears by changing their CSS display. This works fine, but the search box comes up rather quickly. I would like to know if it is possible to make it come up slowly. Possibly by having the search box start small then slowly get bigger, or maybe fading in slowly. I am still new at all of this so if possible keep answers simple, even if they aren't the most efficient. If they could also be in vanilla javascript that would be greatly appreciated, as that is what I am trying to learn. Thank you for your help!

Answer 1

Instead of using display:none and display:block that do not have value between we should use a property that can take more time to get from first value to end value. Let's take opacity as an example: opacity can range from 0 to 1, 0.5 being valid this makes it perfect.

We will be using CSS transition to make our life easier. This tells the browser to transition the chosen property, and by what delay.

 document.getElementById('searchIcon').onclick = function() { document.getElementById('search').style.opacity = 1; document.getElementById('clear').style.opacity = 1; document.getElementById('search').focus(); document.getElementById('searchIcon').style.opacity = 0; } document.getElementById('clear').onclick = function() { document.getElementById('searchIcon').style.display = 1; document.getElementById('search').style.display = 0; document.getElementById('clear').style.display = 0; } 

 #searchIcon,#search,#clear{ transition-property:opacity; transition-duration:1s; } #searchIcon { margin-top: 3.5em; font-size: 5em; } #search { color: rgb(255, 255, 255); background-color: rgb(101, 64, 160); border: solid 3px rgb(247, 157, 210); border-radius: 10px; width: 75%; margin-top: 8.5em; margin-left: 12.5%; font-size: 2.2em; opacity: 0; outline: none; cursor: text; } #clear { text-align: right; width: 5%; margin-top: -1.5em; margin-left: 82%; opacity: 0; display:block; } #clear:hover { cursor: pointer; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <i id="searchIcon" class="material-icons accent">search</i> <input type="text" id="search"> <i id="clear" class="material-icons">clear</i> 

Read more about CSS3 transitions , you could animate anything, not just opacity. You could make your input come from the bottom using positioning or margins. You could play with its size, from width:0 to full width. Imagination is the limit.

On a side note, you might prefer using a class like "visible" or whatever you prefer, and add/remove it from the elements instead of playing directly with the elements' styles. This will have the benefit of being a lot easier to change later, and easier to play with multiple properties.

Answer 2

I have changed some structure and CSS to reach at desired output. Hope this will help you.

 document.getElementById('searchIcon').onclick = function() { document.getElementById('search').classList.add("visible"); document.getElementById('clear').classList.add("visible"); document.getElementById('search').focus(); document.getElementById('searchIcon').classList.add("hide"); } document.getElementById('clear').onclick = function() { document.getElementById('searchIcon').classList.remove("hide"); document.getElementById('search').classList.remove("visible"); document.getElementById('clear').classList.remove("visible"); } 

 .search-wrap{ position: relative; width:75%; } #searchIcon { font-size: 5em; position: absolute; top: 0px; } #searchIcon.hide{ display:none; } #search { color: rgb(255, 255, 255); background-color: rgb(101, 64, 160); border: solid 3px rgb(247, 157, 210); border-radius: 10px; width: 0%; font-size: 2.2em; display: inline-block; margin-top: 0.25em; margin-left: 12.5%; outline: none; cursor: text; visibility: hidden; transition: 0.8s; } #search.visible{ width:85%; visibility: visible; } #clear { width: 5%; display: inline-block; position: absolute; right: 20px; top: 22px; opacity:0; transition:1.8s; } #clear.visible{ opacity:1; } #clear:hover { cursor: pointer; } 

 <div class="search-wrap"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <i id="searchIcon" class="material-icons accent">search</i> <input type="text" id="search"> <i id="clear" class="material-icons">clear</i> </div> 

Also check this Fiddle Example