Is Consistency Possible with CSS Transition Direction?

Take a look at this example: https://codepen.io/jon424/pen/XWzGNLe

In the provided code snippet, there is a button that can toggle the visibility of an image. When clicked, the image disappears from bottom to top and reappears when clicked again.

The user is looking for a way to make the transition consistent in direction. They want the image to always disappear from bottom to top and reappear the same way every time.

Is it possible to achieve this without the alternating behavior?

Below you'll find the HTML, CSS, and JavaScript code:

<button>Toggle</button>
<div class="parent">
   <img class="child1" src="https://picsum.photos/200/300">
   <div class="child1 covering"></div>
</div>

CSS

.parent {
     position: relative;
     overflow: hidden;
     width: 300px;
     height: 300px;
     margin: 10px;
}
 .child {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
}
 .covering {
     z-index: 1;
     background: #fff;
     transition: transform 1s ease-in-out;
     transform: translateY(100%);
}
 .covered {
     transform: translateY(0%);
}

JavaScript

const firstTarget = document.querySelector(".firstTarget");
const covering = document.querySelector(".covering");

document.querySelector('button').addEventListener('click', () => { document.querySelector('.covering').classList.toggle('covered');});

Answer №1

To achieve this effect, you have the option to utilize keyframes or listen for the transitionend event.

const btn = document.querySelector('button'),
    cover = document.querySelector('.cover');

btn.addEventListener('click', ()=> {
    
  if(cover.classList.contains('covered')){
    cover.classList.add('remove_covered');
  } else {
    cover.classList.add('covered');
  }

  cover.ontransitionend = () => {
    if(cover.classList.contains('remove_covered'))
        cover.classList.remove('covered','remove_covered');
    };
  
});
.child {
  width: 300px;
  height: 300px;
}

.parent {
  position: relative;
  width: 300px;
  height: 300px;
}

.cover {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: #fff;
  transition: height 1s ease-in-out;
}

.covered {
  height: 100%;
}

.remove_covered {
  top: 0;
  bottom: auto;
  height: 0;
}
<button>Toggle</button>
<div class="parent">
   <img class="child" src="https://picsum.photos/200/300">
   <div class="cover"></div>
</div>

Answer №2

Do you desire this?

const targetClassList = document.querySelector(".image-item").classList;

document.querySelector("button").addEventListener("click", () => {
  if (targetClassList.contains("open")) {
    targetClassList.remove("open");
    targetClassList.add("close");
  } else {
    targetClassList.add("open");
    targetClassList.remove("close");
  }
});
.parent {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  margin: 10px;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.image-item {
  z-index: 1;
  background: #fff;
}
.close {
  animation: closeAni 1s forwards;
}
.open {
  animation: openAni 1s forwards;
}

@keyframes openAni {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes closeAni {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
<button>Toggle</button>
<div class="parent">
   <img class="child" src="https://picsum.photos/200/300">
   <div class="child image-item"></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

The performance of CasperJS when used with AngularJS is subpar

If I click on just one button in Casper, everything works perfectly. The code below passes the test. casper.then(function() { this.click('#loginB'); this.fill('#loginEmailField', { 'loginEmail': '<a ...

How can I append a hash to a URL using JavaScript without causing the page to scroll?

Is it possible to add a hash to the URL without scrolling the page using JavaScript? I navigate to the page I scroll down I click on a link that adds a hash (for example: http://www.example.com/#test) The page should not scroll back to the top. What is ...

Navigating to a specific element following an AJAX request

Can't seem to get the page to scroll to a specific element after an ajax call. What could be causing this issue? index.php <style> #sectionOne { border: 1px solid red; height: 100%; width: 100%; } #sectionTwo { border: 1px solid blue; heigh ...

Preventing an RxJS Observable interval: A step-by-step guide

I am facing a unique scenario where I am using an RxJS interval, but I might need to abruptly stop it at any point. I thought there would be a simple method like cancel() or stop() similar to clearTimeout for intervals. Is there a way to stop an interval o ...

Is there a reason why async functions do not function properly within a controller's get() handler?

Utilizing Node and Express along with the mssql npm package, I establish a connection to an SQL Server database in my app.js file by setting up a global variable that creates a connectionPool (I've excluded some boilerplate code for brevity): const m ...

"Enhancing the aesthetics: Stylish blue borders around Bootstrap

After successfully setting up bootstrap-select, I have noticed that blue borders are showing in two specific instances: 1) within the dropdown menu 2) when a new value is selected I have made some adjustments but the issue persists. Can someone please p ...

Exploring navigation within a React application

After attempting to develop a react native application and finding it too difficult for my needs, I decided to switch to React. As a beginner in web programming, I recall learning about the concept of 'navigation' in react native, including vario ...

Animating the process of eliminating a background image

I am working on a project with a div that has a background-image. The goal is to make the image fade away when a button is clicked, and then fade in again when another button is pressed. The focus is on only fading the background image while keeping the co ...

Is there a way to use jQuery to verify if an LI element contains a parent LI element?

Struggling with customizing the comments section of a WordPress theme? Utilizing jQuery for styling can be tricky, especially when dealing with nested UL elements like admin comments. The challenge lies in traversing the DOM structure to target specific el ...

Tips for resizing a browser window using an HTML element

I decided to add a unique feature to my website - a handle in the bottom right corner that users can grab and drag to the left to see how the design adapts to different browser window sizes (Responsive Design). To implement this, I included the following ...

The Javascript regex allows for the presence of positive and negative numbers, with the option of a single minus symbol

oninput="this.value = this.value.replace(/[^-0-9.]/g, '') This code snippet is utilized in my current project. However, there seems to be an issue where the input can contain more than one minus sign, as shown here: ---23 To address this p ...

Adjust the size of the image to fit within the div container following

<div id="homePage" style="position: relative; margin: 0px; width: 320px; height: 420px;"> <img id="userImg" src="images/5.jpg" width="100%" height="100%" onclick="imageClick()" style=" z-index: -1; margin: 0 ...

Incorporating PHP variables within JavaScript

As a beginner in web development, I am working on creating an application that heavily relies on JavaScript but also includes PHP/MySQL to prevent users from viewing quiz answers by inspecting the page source. The key pages involved in this project are: in ...

Eliminating rows from a DataTable through an Ajax request

I have a DataTables table from datatables.net with a custom column containing icons for various actions. One of these actions is deleting a row without reloading the data. I'm looking for a built-in function to remove datatable rows locally after dele ...

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

Identifying Angular 2 templates post-file separation: a step-by-step guide

I am currently trying to figure out how to initiate a project in Angular 2 and have encountered an issue. Following the steps outlined in this Angular 2 guide, I was able to separate my .ts files from .js files by configuring my 'temp' directory ...

Looking for a solution to fix the VueJS calculator that only works once?

My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 ...

Receiving POST data in the req.body object with only the key specified in Express.js

I am encountering an issue with my current POST request. There is a simple function in place that handles the sending of data to the server using AJAX. handleSubmit(event) { var http = new XMLHttpRequest(); // object allows for making http requests // ...

Keep the text centered, even if it's larger than the container

I'm currently struggling to center some text. Here is how my text is currently formatted: <div class="panel panel-default" ng-repeat="criteria in controller.productCriteria"> <div class="panel-heading"> <div class="row flex ...

Transferring data from jQuery Ajax to PHP

I'm facing a challenge in retrieving a value back to PHP that I can manipulate and save to the database. It appears that using the GET method with jQuery AJAX is not yielding the desired results. Below is the PHP code snippet where I attempt to captur ...