Attempting to trigger CSS transitions using JavaScript will not be successful

I'm facing an issue where CSS transitions do not work as expected when triggered by JavaScript.

let isSearchBarOpen = false;

function toggleSearchBar() {
  if (isSearchBarOpen) {
    searchBar.style.display = "none";
  } else {
    searchBar.style.display = "flex";
    searchBar.classList.add("search-bar-open")
  }
  isSearchBarOpen = !isSearchBarOpen;

  toggleSearchIcon();
}
.search-bar {
  display: none;
  background-color: #000;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 5px;
  z-index: 1000;
  margin: 0 auto;
  transition: top 2s ease-in;
}

.search-bar-open {
  top: 90px;
}
<div class="search-icon">
  <i class="fas fa-search search-icon-header"></i>
  <img src="images/close-icon.svg" alt="close-icon-search" class="close-icon-search">
</div>
<div class="search-bar" id="search-bar">
  <div class="search-container">
    <form class="search-form">
      <input type="text" placeholder="Search...">
      <button type="submit"><i class="fas fa-search search-icon-action"></i></button>
    </form>
  </div>
</div>

Upon clicking the search button, the following sequence of events should occur:

  1. The function checks the status of isSearchBarOpen.
  2. If it is true (open), the search bar is hidden using inline style (display:none).
  3. If it is false (closed), the search bar is displayed by applying inline style (display:flex) and adding the class .search-bar-open.

Specifying the behavior in the CSS…

  1. When the search bar opens, it applies the .search-bar-open class and overrides the display:none property from the main styling with display:flex defined in the class.

  2. In addition to that, the .search-bar-open class is added for further styling changes.

  3. The expectation is that the transition specified under .search-bar will take place when the .search-bar-open class is present:

a. Starting at top:0;…

b. Transitioning smoothly over 2 seconds with ease-in…

c. Ending at top:90px;.

However, despite these steps, the transition isn't working as intended :-(

javascripthtmlcsscss-transitionsdom-manipulation

Answer №1

When using JavaScript to show an element and apply a class for a transition effect, you may encounter issues because JavaScript executes both actions simultaneously. Since transitions are triggered by changes in properties of an element, simply setting the visibility of an element does not trigger the transition.

To resolve this issue, you can insert a JavaScript action in between to force a browser 'reflow'. This way, the browser first displays the element, updates the page layout, and then applies the class to initiate the transition.

searchBar.style.display = "flex";
searchBar.offsetWidth;
searchBar.classList.add("search-bar-open");

Answer №2

One issue that arises is the inability for transitions to work with properties set to display: none. Instead of using display none and then transitioning to flex, consider hiding the search bar in a different way without resorting to display: none;

An effective solution could involve giving a negative top value to shift it out of the visible window, such as top: -50px (or adjusting the value to match the height of your search bar)

let isSearchBarOpen = false;

    function toggleSearchBar() {
          if (isSearchBarOpen) {
            searchBar.style.top= "-50px";   //Here, top property is used instead of display
          } else {
             searchBar.classList.add("search-bar-open")
          }
          isSearchBarOpen = !isSearchBarOpen;
            
          toggleSearchIcon();
      }

.search-bar {
    display: flex;      //Let the display remain as flex
    background-color: #000;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 5px;
    z-index: 1000; 
    margin: 0 auto;
    transition: top 2s ease-in;
}

.search-bar-open {
    top:90px; 
}

Answer №3

The transition doesn't seem to work with display:none. So, in place of using transition, I have opted for animation.

Here's an example code snippet:

CSS:

       .search-bar {
            display: none;
            background-color: #000;
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 10px 5px;
            z-index: 1000;
            margin: 0 auto;
            animation: toggleOnAnimation 2s ease-in;
        }

        .search-bar-open {
            top: 90px;
        }

        @keyframes toggleOnAnimation {
            0% {
                top: 0
            }

            100% {
                top: 90px
            }
        }

Javascript:

        let isSearchBarOpen = false;
        let searchBar = document.getElementById("search-bar");
        function toggleSearchBar() {
            if (isSearchBarOpen) {
                searchBar.style.display = "none";;
            } else {
                searchBar.style.display = "flex";;
                searchBar.classList.add("search-bar-open")
            }
            isSearchBarOpen = !isSearchBarOpen;

        }

HTML:

    <div class="search-icon">
        <i class="fas fa-search search-icon-header"></i>
        <!-- <img src="images/close-icon.svg" alt="close-icon-search" class="close-icon-search"> -->
        <button onclick="toggleSearchBar()">Click</button>
    </div>
    <div class="search-bar" id="search-bar">
        <div class="search-container">
            <form class="search-form">
                <input type="text" placeholder="Search...">
                <button type="submit">
                    Submit
                </button>
            </form>
        </div>
    </div>

In this implementation, I have utilized animation instead of transition. Hopefully, this explanation makes sense to you :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Receiving an inaccurate value from the input with type='number' attribute

There is an input field where users can enter a string, and I need to capture the value entered into it. $("#test").on("change", function(){ console.log($(this).val()); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery ...

javascriptjqueryhtmlgoogle-chrome

I am attempting to display text in the input box on the console, but unfortunately, I am not seeing any changes in the console when typing

I have this code, but I am not getting any output when I run it: import { restaurantList } from "../config"; import { RestrauntCard } from "./Restraunt"; const Body = () => { const searchText = "KFC"; return ( <& ...

javascriptreactjs

dual slider controls on a single webpage

I am attempting to place two different sliders on the same page. When I implement the following code for one slider, it functions correctly: <h3>Strength of Belief</h3> <div class="slidecontainer"> <div class="slider_left"> < ...

javascripthtml

Unable to validate JWT - UnhandledPromiseRejectionWarning: JsonWebTokenError: invalid token format

One of the functions I have is responsible for sending data to a database (my posts). To ensure security, I use private and public keys to sign and verify tokens. Although I can successfully send this token from the front-end to the back-end via the header ...

javascriptnode.jsexpressjwt

Avoiding repetition in json array using reactjs with the help of axios

After receiving guidance from @Akrion, I managed to resolve the issue! Check out my comments below our conversation for the solution. I am relatively new to reactJS and axios, but I recently collaborated with a classmate on a project. Now, I find myself s ...

javascriptarraysjsonreactjsaxios

What is the reason behind "Script" being considered the offspring of "Body"?

Unfortunately, I struggle with HTML/CSS/Javascript and am just trying to get through my exams. I have the code snippet below: <script> window.onload=function() { var c = document.body.childNodes; var txt = ""; var i; for ...

javascripthtml

Ways to resolve the error message "TypeError: 'setOption' is not a function on type 'MutableRefObject' in React"

CODE export default function EChart({ option, config, resize }) { let chart = useRef(null) let [chartEl, setChartEl] = useState(chart) useEffect(() => { if (resize) { chartEl.resize() } if (!chartEl.cu ...

javascriptreactjstypescriptnext.jsecharts

Display a pop-up window using window.open and automatically print its contents using window.print upon loading

I am trying to open a new window with some HTML content and then automatically print it. Here is the code snippet I have: var windowObject = window.open('','windowObject','arguments...'); windowObject.document.write("<html ...

javascriptjquery

Updating NPM yields no changes

Having trouble updating dependencies in a subfolder of my MERN stack app. Specifically, I am trying to update the dependencies in the client folder where the React code is located. However, when I attempt to update the dependencies in the client folder, it ...

javascriptnode.jsreactjsnpm

What is the process of permanently modifying an HTML document using JavaScript?

I'm interested in creating a basic comment section using JavaScript. Here is the structure of the form : <form> <textarea cols="50" rows="10" placeholder="Share your thoughts ..." id="theComment"></textarea><br/> < ...

phpjavascripthtmlmysql

What are the steps to integrate mailjet into my Vue application?

I am looking to utilize mailjet for my contact form. I have installed it using "$ yarn add node-mailjet" and followed the steps provided. However, I am a bit confused about whether I am integrating mailjet correctly. Below is the code I am currently using: ...

javascriptvue.jsmailjet

"Performing a MongoDB Node query within the time frame of 1 hour from

I am having trouble retrieving data with my query to find all objects within the last hour based on timestamps: Here is the schema I am using: var visitSchema = mongoose.Schema({ timestamp: { type: Date, default: Date.now }, userID: String, userName ...

javascriptnode.jsmongodbmongoose

Creating a dynamic input box with an add/remove button in each row using jQuery

Need help with a jQuery-based UI that allows users to dynamically add input boxes. The desired look is as follows: Default appearance: INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON] Clicking on the [Add_Button] should add another row like this, and so on: ...

javascriptjqueryhtmldynamic

Node.js request body is not returning any data

UPDATE: @LawrenceCherone was able to solve the issue, it's (req, res, next) not (err, res, req) I'm in the process of building a MERN app (Mongo, Express, React, Node). I have some routes that are functioning well and fetching data from MongoDB. ...

javascriptnode.jsexpress

SyntaxError: Unexpected '<' symbol found in JavaScript file while attempting to import it into an HTML document

This issue is really frustrating me In my public directory, there is an index.html file Previously, I had a newRelic script embedded within the HTML in script tags which was functioning properly Recently, I moved the script to a separate JavaScript file ...

javascripthtml

What is causing the error message stating that the DateTime class object cannot be converted to a string?

I found this code snippet on a programming forum function increaseDate($date_str, ${ $date = new DateTime($date_str); $start_day = $date->format('j'); $date->modify("+{$months} month"); $end_day = $date->format(&apo ...

phphtmldatedatetimestring-formatting

Dragging a Google Maps marker causes a border to appear around a nearby marker

Recently, I added a main draggable marker to the map. However, an unusual issue arises when dragging this marker - a blue outline appears around one of the existing markers on the map. This behavior is puzzling as it seems to be triggered by a click event ...

javascriptgoogle-maps

Utilizing JQUERY and AJAX for conditional statements

I am currently in the process of creating a basic chat bot. At this point, the bot replies when the user inputs a pre-defined question. However, I am trying to figure out how to program the chatbot to respond with a "sorry, I don't understand" message ...

javascriptjqueryajaxif-statement

Error loading CSS file on Google App Engine

I attempted to add a CSS file as a static file in my project just to experiment with how it functions, but encountered difficulties right from the start. The content of the CSS file is: body { background:#00FF00; } In addition, here is my configurat ...

htmlcssgoogle-app-engine

When utilizing the data property within the useQuery() hook, an error may arise stating "Unable to

This problem has me scratching my head. The code snippet below is triggering this error: TypeError: Cannot read properties of undefined (reading 'map') When I use console.log() to check res.data, everything seems normal and there is data present ...

javascriptnode.jsreactjsreact-query