CSS transition fails to revert

My standard opacity animation is not working in reverse order. Here is a link to the JSFiddle example. According to the documentation, it should work automatically. Since I am new to JavaScript, I am unsure if this issue lies in my code or if the CSS animation is incorrect.

Here is the HTML:

<div id="bg_layer" class="bg_layer"></div>
<div id="clicker" class="grey"></div>
<div id="galery" class="galery" ></div>

JavaScript:

   clicker.onclick = function() {  
document.getElementById("bg_layer").style.opacity = "0.7";
bg_layer.style.visibility = 'visible';
galery.style.visibility = 'visible';
document.getElementById("galery").style.opacity = "1";};
   bg_layer.onclick = function() {
document.getElementById("bg_layer").style.opacity = "0";
bg_layer.style.visibility = 'hidden';
galery.style.visibility = 'hidden';
document.getElementById("galery").style.opacity = "0";
}

CSS:

html{
min-height:100%;
position:relative;}

body {background-image: url(img/wall.jpg);
    background-repeat: repeat;
    margin: 0 0 0 0;
    height: 100%;
}

 .grey {
    float: right;
  background: #d6d6d6;
  width:300px;
  height:300px;
    margin: 20px 0 20px 0;
}

.bg_layer {
    position: absolute;
    visibility: hidden;
    width: 100%;
    height: auto;
    min-height: 100%;
    z-index: 98;
    opacity: 0;
    background: #000000;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.galery {
    visibility: hidden;
    position: absolute;
    top: 100px;
    margin: auto;
    width: 170px;
    height: 70px;
    background: #ff0000;
    opacity: 0;
    z-index: 99;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

Answer №1

Make a simple adjustment to the transition property by changing

transition: opacity 0.5s ease-in-out
to
 transition: all 0.5s ease-in-out
so that any style changes will smoothly transition.

clicker.onclick = function() {  
    document.getElementById("bg_layer").style.opacity = "0.7";
    bg_layer.style.visibility = 'visible';
    galery.style.visibility = 'visible';
    document.getElementById("galery").style.opacity = "1";};

bg_layer.onclick = function() {
    document.getElementById("bg_layer").style.opacity = "0";
    bg_layer.style.visibility = 'hidden';
    galery.style.visibility = 'hidden';
    document.getElementById("galery").style.opacity = "0";
}
html{
    min-height:100%;
    position:relative;
    scroll-behavior: smooth;
}

body {background-image: url(img/wall.jpg);
    background-repeat: repeat;
    margin: 0 0 0 0;
    height: 100%;
}


 .grey {
    float: right;
  background: #d6d6d6;
  width:300px;
  height:300px;
    margin: 20px 0 20px 0;

}



.bg_layer {
    position: absolute;
    visibility: hidden;
    width: 100%;
    height: auto;
    min-height: 100%;
    z-index: 98;
    opacity: 0;
    background: #000000;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.galery {
    visibility: hidden;
    position: absolute;
    top: 100px;
    margin: auto;
    width: 170px;
    height: 70px;
    background: #ff0000;
    opacity: 0;
    z-index: 99;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
<div id="bg_layer" class="bg_layer"></div>
<div id="clicker" class="grey"></div>

<div id="galery" class="galery" ></div>

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

Invoking a directive function with a return value from a controller

I am working on a directive that contains a form with a simple input. I have multiple instances of this directive on the same page (index.html). Outside of these directives, there is a button that, when clicked, should gather data from all the inputs withi ...

What is the method for sending parameters to PHP from an HTML file using AJAX?

My protfolio.html file contains a table #gallery with different categories. I want to dynamically update the content of the #gallery based on the selected category using ajax. I have a php file that scans a specific folder for images related to the categor ...

Divide the bootstrap form from the outcome

I am in the process of developing a basic web application using Bootstrap that involves taking user input on a form, sending it to a database, and then displaying the data in a table below the form. The main challenge I am facing relates to the styling asp ...

Modifying an image with jQuery

Why won't this image change? Below is the relevant HTML, CSS, and jQuery code. HTML <nav id="desktop-nav"> <div class="logo"> <a href="#"></a> </div> <div> ... </div> ... CSS nav#desktop-nav . ...

Production environment experiencing issues with jQuery tabs functionality

Currently, I have implemented jQuery tabs on a simple HTML page. The tabs are functioning correctly and smoothly transitioning between different content sections. However, upon integrating this setup into my actual project environment, I encountered an is ...

Closing the space between vertical edges of table data cells

I'm currently in the process of translating my resume from MS Word to HTML and CSS for easier maintenance and sharing purposes. I really like the layout and style of my resume and want to maintain it. The design features a left column with bold titles ...

The use of "app.use("*") appears to be triggering the function repeatedly

app.use("*", topUsers) is being invoked multiple times. The function topUsers is called repeatedly. function topUsers(req, res, next){ console.log("req.url", req.url) findMostUsefullReviewsAggregate(6) .then(function(aggregationResult){ ...

The Power of the CSS Universal Selector and Specificity

Currently exploring the puzzling scenario where .x seems to have higher specificity than *.x, despite expectations. Shouldn't *.x technically have a specificity of 0-0-1-1 (1 class, 1 tag) while .x is just one class with specificity 0-0-1-0? Let&apo ...

Vue element fails to appear on the screen

As a newcomer to Vue.js and web development in general, I decided to dive into the vuejs guide. Something puzzled me - when creating a vue component using Vue.component(NameOfComponent, {...}) and inserting it into my HTML as <NameOfComponent></ ...

To link circles vertically with a line and fill them with color when clicked, follow these steps:

I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...

"Error TS2339: The property specified does not exist within type definition", located on the input field

When a user clicks a specific button, I need an input field to be focused with its text value selected entirely to allow users to replace the entire value while typing. This is the markup for the input field: <input type="text" id="descriptionField" c ...

Utilizing Angular to make API requests and handle promises

Currently, I am facing a challenge in my angular application which involves working with the soundcloud api. The issue arises when I make a call to the soundcloud api to retrieve my tracks, loop through them to extract the iframe embed object, inject it in ...

JavaScript Event Listener Triggered when the DOM is Fully Loaded

I am experiencing an issue with my JavaScript code that is meant to trigger AJAX requests when specific HTML elements are clicked. However, instead of waiting for the click event, all the URLs listed in the code seem to be firing as soon as the page load ...

Using the react-bootstrap library, I have successfully integrated a Navbar

The navigation bar below is not functioning properly, and the container is causing the links to lead to a 404 error page. I have attempted writing it in various formats: <Nav.Link href="" >Name</Nav.Link> <Nav.Link href={"&qu ...

Issue with default behavior of infinite scroll in Angular 4

I'm currently working on incorporating infinite scroll into my Angular 4 application. I've carefully followed all the guidelines provided on https://www.npmjs.com/package/ngx-infinite-scroll According to the documentation: By default, the dir ...

Steps for creating a TypeScript class that can implement an interface

As a beginner in TypeScript, I am looking for help with the following code snippet: async function sleep(ms: number) { return new Promise((resolve, reject) => { setTimeout(() => resolve(), ms) }) } async function randomDelay() { ...

Ensure that the tab's content fills up the entire space provided and prevent the need for a vertical scrollbar to appear

Is there a way to make the tab content take up 100% of the available space without causing a vertical scroll due to the height of the tab itself? I am currently using ng-bootstrap and need assistance with this specific issue. You can review my code in the ...

Showing real-time information from an object

I am attempting to showcase the 'helpText' data on the front end based on the type. Is it feasible to include a conditional statement (metricsType variable) and the [key] value into what I want to return? The final 'p' below provides an ...

Can you explain the purpose of this function on Google PlusOne?

Within the code snippet below: (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByT ...

Encountering a bug that states "TypeError: Cannot read properties of null (reading 'useState')" while trying to use useState in a react application

I'm working on incorporating useState into my Next.js app, but I encountered an error as soon as I added the line of code to initialize useState. The popup error message reads: TypeError: Cannot read properties of null (reading 'useState') ...