Trouble with CSS animations persisting after switching classes

I implemented a toggle menu using the source code from my actual project to avoid any confusion:-

div.btn-dropdown-options {
    font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    
    position: absolute;
    z-index: 1;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    margin-top: 4px;

    padding: 8px;
    
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 8px;
    background: #fff;
    display: none;
    
    -webkit-box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%);
    box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%);
}


full code here: - https://jsfiddle.net/bnpehzjw/

.

To add a CSS transition effect for div.btn-dropdown-options, I changed visibility: hidden; to visibility: visible;.

Initially, when clicking on the menu toggle to show the menu, the transition works smoothly. However, when attempting to hide the menu by clicking the menu toggle again, the transition fails to work.

What could I have done incorrectly?

javascripthtmlcssanimationtransition

Answer №1

Summary: Check out the modified code snippet below for a better solution.

A few key points to consider:

  1. Opt for button over a tag. Using a button instead of a hyperlink ensures that an action is triggered upon clicking, rather than just navigating to a link.
  2. Watch out for overly specific CSS rules. For instance, using div.button-dropdown-options (element name + class) can be more specific than just .button-dropdown-options (class only), causing conflicts and necessitating heavy use of !important. This can complicate debugging styling issues.
  3. Include visibility in the transition property as well. To illustrate, you could have something like 
    transition: opacity 2s, visibility 2s;

function showDropDown() {
  const variantButton = document.getElementById('showdropdown');
  const variantMenu = document.getElementById('variantMenu');
  const animate_arrow = document.querySelector('.btn-dropdown-caret');
  const options = document.querySelector('.btn-dropdown-options');
  const over = document.querySelector('.swiper-container');
  const calculatedOptions = window.getComputedStyle(options);

  variantButton.addEventListener('click', function(event) {
    variantMenu.classList.toggle('dropdownShow');
    animate_arrow.classList.toggle('animate-arrow');
  });

}
showDropDown();
.btn-dropdown {
  display: block;
  position: relative;
  white-space: nowrap;
  margin-top: 5px;
  margin-left: 2px;
}

@media screen and (min-width: 768px) {
  .btn-dropdown {
    z-index: 4;
  }
}

/* CSS styles continue... */

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

linking ng-style through live html

I am encountering an issue with dynamic data stored in the database. When trying to apply a style to a div element retrieved from the server response, I am facing difficulties with implementing it using ng-style. If the data is static, everything works fi ...

javascriptcssangularjs

What is the best way to rearrange (exchange) elements within an Immutable Map?

Is there a way to rearrange items within an unchangeable list that is part of a Map? Here's an example: const Map = Immutable.fromJS({ name:'lolo', ids:[3,4,5] }); I have attempted to use the splice method for swapping, as well as ...

javascriptarrayssortingreduximmutable.js

Hover image displacement

Can anyone help me identify the feature used in this price list where the mouseover changes and a big image appears underneath? I'm trying to achieve something similar but can't figure out how. Any guidance would be appreciated. ...

htmlcss

The div element is failing to occupy the entire page

I have encountered an issue where I created two small blocks, but they do not start from the screen edges. Instead, they take up space from the left, right, and top as well. Here is my code: HTML <body> <div id="header"></div> & ...

htmlcss

Node.js 5.0.0 facing compatibility issues with installing NPM packages

I'm currently in the process of setting up my npm packages that are required for my code to function properly. Unfortunately, every time I attempt to install any npm package, I am faced with the same error message: Your system is configured for Node ...

javascriptnode.jsnpm

Adjusting the transparency for every <td> element except for one child within the final <td>

<tbody id="items"> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> <tr><td>Item 3</td></tr> <tr><td>Item 4</td></tr> <tr><td> ...

jquerycsshtml

Manage your video playback by tracking the movement of your mouse on the screen

Is it possible to use mouse position on screen to control a video? Imagine, if I have my cursor on the left side of the screen, the video starts from the first frame. But as I move my cursor to the right side, the video progresses until the cursor reaches ...

jqueryhtmlvideocontrolsmousemove

Implementing React and Material UI: Maximizing Vertical Space Usage for a Box Component

Currently, I am working on a web application using React combined with Material UI. Within my code snippet below, you will see three Box components in play. Box 1 and Box 3 have specific heights set, but I am looking for a way to make Box 2 occupy the re ...

javascriptreactjsmaterial-ui

Send a property parameter to the Vue component

In my project using Vue and Laravel, I am trying to create a modal window with 2 tabs. The idea is to have two buttons, with each button linked to a specific tab that should open when clicked. These buttons are located in the blade template: <button ...

javascriptlaravelvue.js

Why isn't it working? Looking for a script that adds a class when the element is empty?

I have a script that should add the class "leftmax" to the li element with id "spect" when the div element with id "tab2" is empty, but it doesn't seem to be working. Can someone provide some assistance? <script type="text/javascript"> $(funct ...

jquerycsstabsshow-hide

Refresh the Dom following an Ajax request (issue with .on input not functioning)

I have multiple text inputs that are generated dynamically via a MySQL query. On the bottom of my page, I have some Javascript code that needed to be triggered using window.load instead of document.ready because the latter was not functioning properly. & ...

javascriptphpjqueryhtmlajax

Show the URL hash as url.com/something#/ rather than url.com/something/#/

I'm encountering a peculiar issue with my Angular v1.6.5 setup. My routes seem to be acting strangely, for example: $routeProvider .when('/', { templateUrl: 'myTemplate', controller: 'myController', method: &apo ...

javascriptangularjsroutesangular-routing

Ways to deactivate a button with a designated identification through iteration using jQuery

Can't Figure out How to Deactivate a Button with Specific ID $('.likes-button').click(function(){ var el= this; var button1 = $(el).attr('id'); console.log(button1) $('#button1').attr("disabled",true); }) ...

javascriptjquery

Issue encountered with ngRoute dependency injection, despite successful loading of angular-route.js.min file

I'm struggling to understand why the module isn't loading properly with ngRoute. Even though I have included angular and angular-route scripts from a CDN, I keep encountering the error Error: $injector:modulerr Module Error <!--Angular--&g ...

javascriptangularjs

You cannot use a relative path when inserting an image tag in React

I am having an issue with my img tag not loading the desired image when using a relative src path in my React project. When I try: //import { ReactComponent } from '*.svg'; import React from 'react'; import firebase from "./firebas ...

javascriptreactjsimagepath

Determine the number of rows that are currently visible within an HTML table by

Is there a way to get the total number of visible rows in an HTML table using JavaScript? I have a code snippet that filters table rows as I type, but I would like to automatically display the count of visible rows in an innerHTML element. I tried adding ...

javascripthtmlarrays

Rotate images using a JQuery plugin without using HTML tags, solely through passing the images in JavaScript

I am currently working on creating a jQuery image rotator from scratch. While I know there are simple jQuery sliders/rotators available, I specifically want to include the image files directly within the JS code. I do not want to use this HTML structure: ...

javascriptjqueryrotationslider

Something is seriously wrong with the datetime in fullcalendar JavaScript

I've been diving into a tutorial for creating a calendar scheduler in asp.net MVC5 from this link. One issue I'm facing is the datetime being passed and stored as the min value in the database (1/1/0001 12:00:00 AM), almost like it's null b ...

javascriptc#asp.netjsonfullcalendar

How can you position a table above a div in HTML and jQuery without using absolute positioning?

I am trying to create a toggle effect for an information table that needs to be displayed above another DIV. I have managed to achieve this using z-index and position:absolute, but I am wondering if there is a way to do it without using absolute positionin ...

jqueryhtmlcss

Efficiently processing multiple Ajax requests with a single callback function

I am currently facing a situation where I need to make multiple AJAX requests and only proceed if all of them are successful. The typical usage of $.when($.ajax(), [...]).then(function(results){},[...]); doesn't quite fit my needs because the number o ...

javascriptjqueryajax