What is the best way to add animation to the hide/show function?

    <div class="overlay"></div>

CSS:

    .overlay::after
     {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           content: "";
           z-index: -1;
           height: 100%;
           transition: all 0.5s ease-in-out;
           opacity: 0.5;
        }

        .popup::before
        {
           content: "";
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;. 
           height: 100%;
           z-index: -1;
           transition: all 0.5s ease-in-out;
        }

I have created an overlay class to act as a mask for popups. However, I am facing an issue where the animations are not displaying despite having the transition property set. My goal is to slide it from left to right smoothly without using negative left values when hidden and positive left values when shown. Any suggestions on how to achieve this effect without using negative left values?

htmlcss

Answer №1

Here is an example of pure CSS implementation:

*{box-sizing: border-box}
menu{
  position: absolute;
  top: 40px;
  left: -200px;
  width: 200px;
  display: block;
  background: black;
  color: white;
  transition: left .3s ease
}
menu li{padding: 10px 14px}
input:checked + menu{
  left: 0
}
label{cursor: pointer}
<label for=toogleMenu >Click to toggle the Menu </label>
<input type=checkbox id=toogleMenu hidden />
<menu>
  <li>Home</li>
  <li>Work</li>
  <li>Contact</li>
  <li>Help</li>
</menu>

An alternative approach using transform property:

*{box-sizing: border-box}
menu{
  position: absolute;
  top: 40px;
  left: 0px;
  width: 200px;
  display: block;
  background: black;
  color: white;
  transform: translateX(-200px);
  transition: transform .3s ease
}
menu li{padding: 10px 14px}
input:checked + menu{
  transform: translateX(0);
}
label{cursor: pointer}
<label for=toogleMenu >Click to toggle the Menu </label>
<input type=checkbox id=toogleMenu hidden />
<menu>
  <li>Home</li>
  <li>Work</li>
  <li>Contact</li>
  <li>Help</li>
</menu>

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

Discover the size of an image using JavaScript by accessing innerHTML

I'm currently working on a unique AJAX function that retrieves image URLs without using node append for insertion. Instead, I opted to utilize innerHTML, but this has posed challenges in accurately obtaining the file dimensions. My current approach i ...

javascripthtmlajax

Tips on resizing images in CSS with accompanying text to prevent overlap

In my school project, I am using cloud9. When utilizing the live preview in a small window pane, my images appear correctly sized. However, upon maximizing my screen browser, the images stack on top of each other and their dimensions increase. My ideal l ...

htmlcssimage

Unfortunately, Safari and iOS do not support the video functionality

I am encountering an issue with my HTML5 sample video not loading in Safari 11 on OSX, but working perfectly fine in Chrome and Firefox. Additionally, the video is not functioning on iOS at all (neither in Safari nor in Chrome). Below is the HTML code: & ...

djangohtmlvideosafarihttp-headers

Building a table using MUI 5 and the powerful Grid component from Material UI

For my project, I decided to utilize the Grid component of Material UI v5 to create a global table component. This choice was made due to the difficulties encountered when trying to modify the border and border radius for the table row and footer elements. ...

htmlcssreactjshtml-tablematerial-ui

How can I enable autofocus on a matInput element when clicking in Angular 6?

Is there a way to set focus on an input element after a click event, similar to how it works on the Google Login page? I've tried using @ViewChild('id') and document.getElementId('id'), but it always returns null or undefined. How ...

angularhtmlangular-material

Capturing images on Android devices through the camera option using HTML input file type

Having an issue with an LG G2 Android device running version 4.4.2 and the default browser. I'm currently using this tag to allow users to upload images from their devices to the server: {<input type="file" accept="image/*;” />} When I clic ...

androidhtmlbrowserinput

When Chrome DevTools are opened, some elements of a webpage undergo a transformation in their style

I've recently started working on a static webpage using VueJS/NuxtJS and Buefy as the UI library, although I am still learning about these technologies. One issue that I have encountered is that certain elements on the page change style when I open C ...

cssvue.jssassgoogle-chrome-devtoolsmedia-queries

Creating a personalized .hasError condition in Angular 4

I am currently in the process of modifying an html form that previously had mandatory fields to now have optional fields. Previously, the validation for these fields used .hasError('required') which would disable the submit button by triggering a ...

javascripthtmlangulardom-events

Troubleshooting the issue of CSS animations activating twice and causing a flickering effect specifically in the Firefox browser

I am facing an issue with CSS animations in Firefox. When I try to slide in some radio buttons upon clicking a button, the animation seems to be firing twice in Firefox while it works fine in Chrome. I have attempted several solutions but haven't been ...

javascriptjqueryhtmlcssanimation

Grab the SVG and resize it to a smaller scale

I have a small application built using Raphael.js that creates a node network with SVG and reorganizes it based on user selections. My goal is to capture the SVG image I've created and display it in a "mini-map" format at the bottom of the screen. Si ...

javascripthtmlsvgraphael

Is it required to double click checkboxes to uncheck them?

My checkboxes require 2 clicks to be unchecked, even though one click is enough to check them. This issue occurs in all 7 checkboxes and there is no onchange() function or similar in TS. import { Component, OnInit, Inject } from '@angular/core&apos ...

htmlcssangular

"JavaScript issue: receiving 'undefined' when trying to retrieve input

This code snippet is for a web app that tracks the number of losses in a game. The problem arises when trying to retrieve the value, which returns undefined. Every time I reference the username variable, it returns undefined. document.addEventListener(&a ...

javascripthtmlcss

Tips for integrating a vertical menu with button icons and subcategories

Currently working on a project with Twitter Bootstrap and looking to create a specific sidebar setup. My goal is to include subcategories using an accordion and a collapsible menu for mobile devices. I came across a similar implementation at http://jsfiddl ...

jquerycsstwitter-bootstrap

The tag (p) is not located in a valid position

I am currently working with the following code snippet: <p class="pHelp"> xxxxx <a href="#components">Form components</a> yyyyy </p> This particular line is located within a long chain of nested HTML tags inside html/body/a/a/a/a/ ...

htmleclipsetags

choosing between different options within Angular reactive forms

I am attempting to create a select element with one option for each item in my classes array. Here is the TypeScript file: @Component({ selector: 'app-create-deck', templateUrl: './create-deck.component.html', styleUrls: [' ...

javascripthtmlangulartypescript

Controlling the page scroll when adding data using jQuery

I am encountering an issue with a webpage that displays around 20 pictures in separate divs stacked vertically. Below these 20 pictures, there is a "show more" button that, when clicked, loads another set of 20 pictures and appends them to the existing dat ...

htmljqueryscroll

Methods to fill a data table cell

I have recently created a table and I am facing an issue in populating the tds cells using JavaScript. The data for the table is coming from the server. Here's my table: <table id="report" class="infoRecurso" id='testExportId' style="wid ...

javascriptjqueryhtml

What is the best way to implement slug URLs in Django?

Hello there! I'm a beginner when it comes to working with Django and currently, I am in the process of creating a website. On the admin page located at , I have added two posts - each one having its own unique slug. The first post's slug is &apo ...

pythonhtmldjangourlslug

Utilizing the Masonry jQuery plugin for optimizing empty spaces

Recently, I came across the Masonry plugin and I'm considering using it in a project. One question that intrigues me is whether there is a way to detect empty spaces that occasionally show up in the layout when divs are positioned. Being able to ident ...

javascriptjqueryhtmlcssjquery-masonry

Examining the scroll-down feature button

I'm currently experimenting with a scroll down button on my website and I'm perplexed as to why it's not functioning properly. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" c ...

javascripthtmlcss