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

There seems to be an issue with npm displaying an inaccurate version number for my

Javascript Google Maps API is not working properly when trying to load the Gmap via a Json

Exploring React-Query's Search Feature

Smooth scrolling in JavaScript can lead to unexpected jumps when using scroll-margin-top

Arranging column contents neatly on small screens

Issues with Ajax calls not functioning properly within CakePHP

What is the process to subscribe and obtain data from a server-to-user channel using pusher-js?

"I'm curious about how to reset a form in reactjs hooks after it has been submitted

What is the best way to toggle the visibility of a dynamically created HTML element in ASP.NET?

I am unable to access the state after setting it in useEffect in React. Why is this happening?

Ensuring proper alignment of images and text in HTML when resizing

What is the best way to implement fontSize on CardHeader title using Material UI?

Looking to create cascading dropdown options

Issue encountered while incorporating a PHP file into Javascript code

Resetting ajax success message when modal is closed

Guide on integrating a php script into a react application

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Steps for populating a dropdown list with a JSON response

Adjust the dimensions of the MaterialUI Switch component manually

The placement of term.js is always at the bottom of the body