What is the best way to smoothly move a fixed-size div from one container to another during a re-render process?

Question

What is the best way to smoothly move a fixed-size div from one container to another during a re-render process?

Introduction

Similar, though not identical to my scenario:

Situation 0: Imagine you have a container (chessboard with divs for game pieces) and a dead-pieces-view (container for defeated pieces). The positioning of these containers is determined by CSS rules and device/media parameters, managed by the browser.
Situation 1: A piece is captured and needs to be smoothly transitioned from the board to the dead-pieces view in the correct location.

I can accurately identify the moving divs using unique ids/keys.

Additional Requirements: I am using React, so I anticipate that the smooth transition can be achieved simply by updating the rendering from State0 to State1. (Or, at the very least, with minimal imperative code additions)

Here is a link to my sandbox project: https://codesandbox.io/s/crazy-pasteur-lr4ku

Prior Attempts:

I experimented with using react keys and ids to track the moving div. However, the issue was not specific to React; even manual movement of the div using pure JS (appendChild) did not result in a smooth transition.
I also attempted to use react-pose as it seemed like a potential solution. Unfortunately, it appeared to be limited to animating ul/li elements exclusively, while other animated elements on the page remained independent from one another (or perhaps I did not fully explore the framework's capabilities).

javascript html css reactjs css-transitions

Answer 1

Answer №1

I stumbled upon a concept that seems like it could be a good fit for my needs.

Abstract:

When div1 changes position to div1', I immediately kill div1 while smoothly animating the transition of div1' from its last known place using keyframes, with 1 iteration.

Technical:

In React: componentWillUnmount saves the current position of the uniquely identified element.

In React: componentDidMount calculates the difference, creates an animation on the fly, and uses setState to re-render with the animation.

Unfortunately, this approach requires some global states and other anti-patterns, but it does the trick.

Working example(based on question): https://codesandbox.io/s/muddy-hill-ti6bs

Key points:

No absolute positioning is used anywhere
The containers resize according to CSS properties when the page/browser/viewport is resized
The target div smoothly moves to its new spot upon re-render, even if the previous animation was interrupted.

Answer 2

I stumbled upon a concept that seems like it could be a good fit for my needs.

Abstract:

When div1 changes position to div1', I immediately kill div1 while smoothly animating the transition of div1' from its last known place using keyframes, with 1 iteration.

Technical:

In React: componentWillUnmount saves the current position of the uniquely identified element.

In React: componentDidMount calculates the difference, creates an animation on the fly, and uses setState to re-render with the animation.

Unfortunately, this approach requires some global states and other anti-patterns, but it does the trick.

Working example(based on question): https://codesandbox.io/s/muddy-hill-ti6bs

Key points:

No absolute positioning is used anywhere
The containers resize according to CSS properties when the page/browser/viewport is resized
The target div smoothly moves to its new spot upon re-render, even if the previous animation was interrupted.

Answer 3

Answer №2

It is important to:

Maintain consistency in the parent element during re-renders in order to prevent React from creating/deleting a new child. To achieve this, the parent container must have a persistent key value such as
```
key: idx === parentContainer ? "withBlock" : idx
```
.
Ensure there is a transitionable property available, like setting position: absolute in the styles and allowing modification of the top value.

Once these conditions are met, you can update the transitionable property after each render by utilizing the following code snippet:

const Block = () => {
  const ref = useRef();
  useEffect(() => {
    if (!ref.current) {
      return;
    }
    const el = ref.current;
    const {top} = el.parentNode.getBoundingClientRect();
    el.style.top = `${top + border}px`;
  });
  return <div className="block" ref={ref} />;
};

https://codesandbox.io/s/busy-mendeleev-7s2zg

Answer 4

It is important to:

Maintain consistency in the parent element during re-renders in order to prevent React from creating/deleting a new child. To achieve this, the parent container must have a persistent key value such as
```
key: idx === parentContainer ? "withBlock" : idx
```
.
Ensure there is a transitionable property available, like setting position: absolute in the styles and allowing modification of the top value.

Once these conditions are met, you can update the transitionable property after each render by utilizing the following code snippet:

const Block = () => {
  const ref = useRef();
  useEffect(() => {
    if (!ref.current) {
      return;
    }
    const el = ref.current;
    const {top} = el.parentNode.getBoundingClientRect();
    el.style.top = `${top + border}px`;
  });
  return <div className="block" ref={ref} />;
};

https://codesandbox.io/s/busy-mendeleev-7s2zg

What is the best way to smoothly move a fixed-size div from one container to another during a re-render process?

Answer №1

Answer №2

Similar questions

Is it possible to transfer data between pages by utilizing state in the Next.js 13 App directory?

The backend post request is returning only "undefined" in JavaScript

After a period of 10 minutes with no activity, proceed to the next page

Adding a toggle button within a Syncfusion DataGrid table is a simple and effective way to enhance

Ensure that divs can adjust in size while maintaining the same dimensions of their contained

Eliminate the lower boundary of a divisional table

Generating dynamic @returns annotations in JSDoc based on the value of @param

Displaying content based on changing conditions fetched from the database

I am encountering an issue where the POST data is not being successfully sent using XMLHttpRequest unless I include

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

Navigate the Angular interceptor route to display a 404 error page when clicking on a `<a href="#">` tag

Is it possible to switch variations in WP-Commerce from drop-down menus to text input

What is the best way to delete a specific date from local storage using Angular after saving it with a key

Error: The function prevDeps.join is not defined in Next.js

Tips for submitting a form using alternative methods of action

Is there a way to substitute all underscores in HTML tag IDs and classes with a hyphen symbol?

The Bootstrap validator triggers the form submission only after the second click

Challenges with navbars and Bootstrap

Utilizing JQuery to select list items for pagination purposes

The no-unused-expressions rule is triggered when an assignment or function call is expected