Enhancing Your Styles with a Second Transition in CSS

I am facing an issue with a button that triggers the appearance of a div from the bottom with a smooth transition lasting 0.5 seconds. However, when the div transitions down to disappear, it snaps down abruptly instead of transitioning smoothly. I have attempted various solutions but have not been able to achieve a smooth downward transition for my div.

i = 0;

function focusInput() {
  document.getElementById("infoButton").focus();
}
function blurInput() {
  document.getElementById("infoButton").blur();
}

function check() {
  if (i == 0) {
      focusInput()
      i++;
  } else {
      blurInput()
      i--;
  }
}
html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: #eeeeee;
}

.settings {
  float: left;
  width: 35%;
  margin-top: 5px;
  text-align: right;
}

.settings .infoButton img {
  margin-top: -15px;
  margin-left: -5px;
  width: 15px;
}

.settings .infoButton {
  height: 20px;
  width: 20px;
  margin-top: 5px;
}

.slide {
  text-align: left;
  z-index: 999;
  visibility: hidden;
  position: absolute;
  width: 100vw;
  height: 100px;
  left: 0;
  top: 100%;
  background-color: #161618;
  -webkit-transition: top 0.5s;
  transition: top 0.5s;
}

.infoButton:focus + .slide {
  visibility: visible;
  top: calc(100vh - 100px);
}
<div class="settings">
  <button id="infoButton" onclick="check()" class="infoButton"><img src="https://pics.freeicons.io/uploads/icons/png/7410416951552644391-512.png" alt="settings icon"></button>
  <div class="slide">
    <p>Hello</p>
  </div>
</div>

This is the link to my codepen: https://codepen.io/D4SH13/pen/VwbwgZN

Thank you in anticipation!

javascripthtmlcssbuttontransition

Answer №1

When toggling visibility, it happens instantly without any transitions taking place. This means that the .slider appears visible before it animates upwards, and hidden before animating downwards.

Using translations over the top property can result in performance issues. To address this, I replaced the change in height with transform: translateY.

Only properties that are numerical values, such as hex colors and regular numbers, can be animated. Therefore, I hide the .slider by adjusting its opacity.

The second parameter in opacity 1ms 0.5s represents a delay of 0.5 seconds.

I recommend considering an alternative solution as having your .slider at the bottom of the page while still being clickable may not be ideal. Adding pointer-events: none ensures that the .slider is not focusable when inactive.

I also made corrections to your JavaScript code, including declaring variables using "var" and changing i (now: sliderOpen) to a boolean value.

var sliderOpen = true;

function focusInput() {
  document.getElementById("infoButton").focus();
}
function blurInput() {
  document.getElementById("infoButton").blur();
}
function check() {
  if (sliderOpen) {
      focusInput()
  } else {
      blurInput()
  }

  sliderOpen = !sliderOpen;
}

The JavaScript code provided is unnecessary since the desired toggle effect for your .slider can be achieved solely through CSS. As a result, I removed the script and verified that everything continues to function properly.

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: #eeeeee;
}

.settings {
  float: left;
  width: 35%;
  margin-top: 5px;
  text-align: right;
}

.settings .infoButton img {
  margin-top: -15px;
  margin-left: -5px;
  width: 15px;
}

.settings .infoButton {
  height: 20px;
  width: 20px;
  margin-top: 5px;
}

.slide {
  text-align: left;
  z-index: 999;
  position: absolute;
  height: 100px;
  left: 0;  
  background-color: #161618;

  /* CHANGED or ADDED */
  bottom: 0;
  right: 0;
  transition: transform 0.5s, opacity 1ms 0.5s;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.infoButton:focus + .slide {
  /* CHANGED or ADDED */
  opacity: 1;
  transform: translateY(0%);
  transition: transform 0.5s, opacity 1ms;
  pointer-events: auto;
}
<div class="settings">
  <button id="infoButton" class="infoButton"><img src="https://pics.freeicons.io/uploads/icons/png/7410416951552644391-512.png" alt="settings icon"></button>
  <div class="slide">
    <p>Hello</p>
  </div>
</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

What is the best way to incorporate audio playback while browsing files on an HTML5 webpage with TypeScript?

<input type="file" id="soundUrl" (change)="onAudioPlay()" /> <audio id="sound" controls></audio> This is the HTML code I'm working with, and I'm looking to trigger audio playback after a user selects an MP3 file using TypeScrip ...

angularhtmltypescript

Bring in all subdirectories dynamically and export them

Here is what I currently have: -main.js -routeDir -subfolder1 -index.js -subfolder2 -index.js ... -subfolderN -index.js Depending on a certain condition, the number of subfolders can vary. Is there a way to dynam ...

javascripttypescriptwebpackbundler

Ag-Grid: Matching colors with filtering functionality

Can AG-Grid be configured to highlight matching cells during quick filtering? For example, if I have the following data: [ { firstName: 'Tom', lastName: 'Doe', company: 'Tesla' }, { firstName: 'Tim', lastName: & ...

javascriptmaterial-uiag-gridhighlightag-grid-react

My SF2 app is experiencing issues with AngularJS integration

I am currently developing a straightforward API using Symfony2 and now I am experimenting with integrating AngularJS into my bundle to visualize the results of my API calls. How can I effectively implement AngularJS? I initiated a bundle via app/console ...

javascriptphpangularjssymfony

Trouble arises when trying to load angular ui-bootstrap using require.js unless I change the name to ui.bootstrap

Code Overview: main.js: require.config({ paths: { 'uiBootstrap': '../lib/bootstrap/angular-bootstrap/ui-bootstrap-tpls.min' }, shim: {***}, priority: ['angular'], deps: ...

javascriptangularjsrequirejsangular-ui-bootstrapjs-amd

The Fusion of JavaScript Frameworks

Is it considered poor practice for a seasoned developer to build a web application using multiple JS frameworks? For instance, when incorporating AngularJS into a project, and certain tasks could be more efficiently achieved with JQuery, should one opt fo ...

javascriptjqueryangularjs

Testing the compose() function in ReactJS with JestJS and Enzyme: A guide for testing graphql() function integration

Currently, I am testing a basic reactJS component with react-apollo using jestJS and utilizing the coverage feature of jest. However, after running the coverage analysis, it has come to my attention that I have overlooked testing the line options: (props) ...

javascriptreactjsunit-testingjestjsreact-apollo

The feature for choosing rows is not functioning properly when using materializecss in Tabulator

While working on my project, I encountered an issue with selecting rows. After some debugging, it was revealed that the culprit behind this behavior is the tabulator_materialize.min.css file. Interestingly, when I don't use this CSS, everything functi ...

csstabulator

"Use the <script src=...> tag to display content in the designated div

I have encountered a challenge with integrating an external script to pull an RSS feed from . The JavaScript code provided by this site is illustrated in the example below: <script src="//rss.bloople.net/?url=https%3A%2F%2Fwww.feedforall.com%2Fsample ...

javascripthtmlsrc

Tips for posting images upon clicking a div instead of a submit button

I previously had a code that allowed users to click on the submit button and have the text inside a contenteditable div passed to upload.php using JQuery, inserted into a database, and immediately displayed. Now, I want to modify this code to also handle i ...

javascriptphpjqueryajaxupload

Is there a way to enable multiple selections in a particular section?

Currently, I am in the process of working on my step by step order and I want to express my gratitude for all the assistance I have received so far. Despite the help, I still have some unanswered questions! The steps in my project are categorized into dif ...

javascriptjqueryhtmlcss

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

I seem to be encountering an issue when running my code where I receive a 'cannot read property 'age' of null'. This error breaks my code, and I'm trying to figure out how to implement a check to ensure it only runs when I am signe ...

javascripthtmlreactjs

changing a one-dimensional array into a two-dimensional array using TypeScript

I need help transforming a flat array into a 2D array, like this: ['-', '-', '-', '-', '-', '-', '-', '-', '-'] My desired output is: [ ['-', '-&apo ...

javascriptarraystypescript

Place centered items within a flexbox that uses space-between alignment

When designing a navigation section, I am looking to achieve space-between justification. However, for smaller screens where the navigation items may need to wrap onto multiple rows, I want the items to center themselves instead of aligning to the left whe ...

cssmobiledynamicflexbox

Utilizing Vue alongside Laravel by passing null values as props

Is it permissible to provide a null prop? I have created a main component that accepts the user prop. <div id="app"> <master :user="{{ $user }}"></master> </div> The prop is declared as follows: props : { user: { ...

javascriptlaravelvue.jsvuejs2vue-router

Grabbing a section of a URL through a bookmarklet: A simple guide

Recently, I've been using this handy bookmarklet: javascript:currentUrl=document.location.href;document.location.assign(currentUrl+'embed'); This neat tool grabs the current URL, such as www.example.com/knZg_INW8fL/, and adds embed to it f ...

javascriptbookmarklet

Modifying the appearance of a Component within a NavLink

I'm currently working on a navbar using NavLink from React-Router-Dom. It's fine to use the 'isActive' prop to style the active Link, but I'm stuck on how to style the subelements inside it. For more specific details, please take a ...

javascriptreactjstypescriptreact-router-domreact-props

Having issues with Bootstrap flip div not functioning properly when clicked on a mobile device?

I am currently working on a website and encountering an issue. Here is the code snippet I am using: https://jsfiddle.net/3caq0L8u/ The objective is to flip a div when a button is clicked. The button responsible for flipping the div resides in both the " ...

javascriptjqueryhtmlcsstwitter-bootstrap

The application's view page is not receiving a response from ajax

While debugging in the Firefox console window, I am able to see the output. However, it is not displaying on my view page. Below you will find my ajax code and controller function. Even though I am receiving a result, the view remains blank. Ajax: <sc ...

javascriptajaxlaravellaravel-5onclick

The postback event continues to trigger even if the OnClientClick function returns false

Is there a way to prevent Button1_Click from firing after a Jquery function returns false in my code snippet below? <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- ...

c#javascriptjqueryasp.net